/    Sign up×
Community /Pin to ProfileBookmark

detecting page width change using jQuery .resize()

Copy linkTweet thisAlerts:
Oct 23.2014

I’m working with jQuery .resize() method. I would like to change the html within a div “logoTitleHtml when the browsers width is changed. The HTML in the div does change when the browser is refreshed but does not do so when it is not which is causing a scroll bar at the bottom of my site when the width is less than or equal to 499px in width.

How can I make jQuery detect and change the HTML without having to manually refresh the page (which is a horrible user experience)? I’m not opposed to using other JS Frameworks that will make this easier to accomplish.

Thank You.

This is my current code:

[code]
var windowSize = jQuery(window).width(),
logoTitle = jQuery(“.logo-contents”);

jQuery(window).resize(function(){
if (windowSize <= 499) {
logoTitle.html(“So.. WYGD?”);
}else (windowSize >= 500) {
logoTitle.html(“So.. What You Gonna Do?”);
}
});
[/code]

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@deathshadowOct 23.2014 — This -- as with most of the things people throw jQuery at for no malfing good reason -- is something that you really have no business doing in javascript in the first place. You're talking LAYOUT...

http://lmgtfy.com/?q=media+queries

There's a reason I consider most if not all JavaScript "frameworks" to be idiotic nonsense. [i](Hell, I don't even deploy my own JS library I made to show how bloated and stupid things like jQuery are!)[/i]

JS for nothing and your scripts for free. That ain't workin', that's not how you do it! Lemme tell ya, these guys ARE dumb.
Copy linkTweet thisAlerts:
@deathshadowOct 23.2014 — Oh, and just to show you one way of handling that... Let's say you're talking your H1.

&lt;h1&gt;
So... &lt;span&gt;What You Gonna Do?&lt;/span&gt;
&lt;/h1&gt;

@media (max-width:500px) {
h1 span { display:none; }
h1:after { content:"WYGD?"; }
}

Look ma, no JavaScript.

[i]Side note, it's improper to use an even number of periods in your ellipsis. One, three or five![/i]
Copy linkTweet thisAlerts:
@codenativesNov 24.2014 — you can detect both events and just execute code when it's a width change:

var lastWidth = $(window).width();

$(window).resize(function(){

if($(window).width()!=lastWidth){

//execute code.

lastWidth = $(window).width();

}

}
×

Success!

Help @Jerrell_B spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...