im trying to switch a background image out based upon the window size...
https://codepen.io/anon/pen/qYdZox
function resize(){
var dbg = $('.full-screen-banner').data('dbg');
var mbg = $('.full-screen-banner').data('mbg');
if ($(window).width() < 768) { console.log('less than');
$(".full-screen-banner").css('background-image', mbg);
} else {
$(".full-screen-banner").css('background-image', dbg);
}
}
resize();
$(window).on('resize', resize);
Im using the above, the console log works fine but the inline style wont change?
You need to do something like this, where you use url(...) with the image source path
$(".full-screen-banner").css('background-image', 'url('+dbg+')');
Related
I have this slider on my WP page, which is vertical. I would like to convert it so it his horizontal. As I understood I need to change my JS code.
jQuery(function($) {
var image_es;
var zoom_timer;
var win_width = 0;
function resize_venedor_thumbs() {
if (win_width != $(window).width()) {
if (image_es) {
image_es.destroy();
}
image_es = $('#thumbnails-slider-756').elastislide({
orientation : 'vertical',
minItems: 4
});
win_width = $(window).width();
}
if (zoom_timer) clearTimeout(zoom_timer);
}
$(window).load(resize_venedor_thumbs);
$(window).resize(function() {
clearTimeout(zoom_timer);
zoom_timer = setTimeout(resize_venedor_thumbs, 400);
});
});
I tried to change vertical to horizontal in inspect element mode but it did not change at all.
If you change the orientation to 'horizontal' in inspect element mode, you need to make sure the resize_venedor_thumbs function is called.
It looks like it is called on load or resize (try resize because loading will erase your edits); or you can call it in the console yourself resize_venedor_thumbs(); or, of course, edit the source and load the page.
I have a filter on my website positioned in an aside with a class 'left-bar'. My site is responsive and i want the filter to move to the div with the class 'mobile-top-bar'.
With the first 'if' i check if the window isn't already below 992px and when that's the case the filter will be moved to the 'mobile-top-bar' (this works great)
if ($(window).width() < 992) {
$('#moveableFilter').prependTo('.mobile-top-bar');
}
With the second piece of code i've made a function that should move the filter back and forth, but that doesn't happen. The filter already disappears from the 'left-bar' when i slightly change the width of the window (when it's still above 992px) and when i change it below 992px it isn't present in the mobile-top-bar.
What did i do wrong?
$(window).on('resize', function(){
var win = $(this);
if (win.width() < 992) {
$('#moveableFilter').prependTo('.left-bar');
} else if (win.width() >= 992) {
$('#moveableFilter').prependTo('.mobile-top-bar');
}
});
It looks like you switched the cases around by accident. Try this:
$(window).on('resize', function(){
var win = $(this);
if (win.width() >= 992) {
$('#moveableFilter').prependTo('.left-bar');
} else if (win.width() < 992) {
$('#moveableFilter').prependTo('.mobile-top-bar');
}
});
... However, I do agree with the comment that says that it would be better not to use two different bars, but to move it with CSS media queries.
I'm using TextOverflowClamp.js to try and line clamp some text. It works while decreasing window width, but does not reset after increasing window width. Can someone help with resetting the line clamp after the clamp is triggered and window width becomes greater than set conditional size?
Codepen
All the code is in the Codepen, but my resize and load functions are here:
var winWidth;
$(window).resize(function () {
winWidth = $(window).width();
if (winWidth <= 991) {
loadClamp();
}
else {
// reset line clamp code here
}
}).resize();
function loadClamp() {
$(window).on('resize', function() {
// TextOverflowClamp.js
clamp(document.getElementById('js-toclamp1'), 1);
});
}
I couldn't seem to find a proper site for TextOverflowClamp.js. However, reading through the code itself, it seems passing 0 as the second parameter should remove the truncation (It is unclear if this is intentional but it seems to work). However, if there were any inner elements initially, those are lost and were not retained. In the case of your example, it is just text, so it should be fine:
var winWidth;
$(window).resize(function () {
winWidth = $(window).width();
if (winWidth <= 991) {
loadClamp(1);
}
else {
// back to normal
loadClamp(0);
}
}).resize();
function loadClamp(lines) {
clamp(document.getElementById('js-toclamp1'), lines);
}
Some additional notes on your code. You were adding an additional resize handler every time you called loadClamp and there was really no reason for this. I removed that.
Additionally, it is important that you place the TextOverflowClamp code before your own code.
http://jsfiddle.net/w9nkad0u/
I'm trying to set the width of a column element dynamically using js / jquery on wordpress. I'm taking this approach because my theme is hijacking my css and I have experienced an unprecedented amount of stubbornness from it.
Here is my code, I know 100% that jquery is loading and that javascript executes (by putting in alerts and testing etc.), all help appreciated!
My html is along the lines of
<div class="3-col-force">test</div>
<div class="3-col-force">test</div>
<div class="3-col-force">test</div>
<script type="text/javascript">
window.onload = fixCol();
window.onresize = fixCol();
function fixCol(){
var offset = getWidth();
if (offset > 765) {
setColumnWidth('33%');
} else {
setColumnWidth('100%');
}
}
function setColumnWidth(newWidth){
var columns = document.querySelector(".3-col-force");
columns.style.width = newWidth;
}
function getWidth() {
var width = $(window).width();
return width;
}
</script>
If you are going to use JQuery I would suggest the code below. I believe it is what your are attempting to accomplish with your code.
jsfiddle example: http://jsfiddle.net/larryjoelane/bazma5st/29/
Javascript/Jquery:
//set the limit
var limit = 765;
//the column class
var colClass = $(".3-col-force");
//window resize event
$(window).on("resize",function(){//begin on resize event
//if the window is greater than the limit
if ($(this).width() > limit) {//begin if then else
//set its width to 33%
colClass.width("33%");
} else {
//set its width to 33%
colClass.width("100%");
}//end if then else
//end of window on resize event
}).on("load",function(){//begin on load event for window load
//if the window is greater than the limit
if ($(this).width() > limit) {//begin if then else
//set its width to 33%
colClass.width("33%");
} else {
//set its width to 33%
colClass.width("100%");
}//end if then else
});//end on window load event
I am aware of how stupid this sounds...
I'm trying to re-size an iframe. Here's what I have:
function doTwitterHeight(screenwidth)
{
if(!screenwidth){
var screenwidth = window.innerWidth;
console.log('screenwidth is now defined as: ' + screenwidth);
}
if(screenwidth >= 981){
$('#twitter-widget-0').css('height',466);
}
else if(screenwidth <= 980 && screenwidth >= 952){
$('#twitter-widget-0').css('height',614);
}
else if(screenwidth <= 951 && screenwidth >= 877){
$('#twitter-widget-0').css('height',632);
}
//etc.
else{
$('#twitter-widget-0').css('height',468);
}
}
The function works when called with resize, like so:
$(window).on('resize', function(){
doTwitterHeight();
});
But I also need the function to be called and re-size the height of that div when the page is first loaded. I've tried:
$(window).on('load', function() {
doTwitterHeight();
});
And:
$(document).ready(function(){
doTwitterHeight();
});
And:
$(doTwitterHeight());
And I've had no luck with any of them.
Thanks in advance :)
So the resolution was to modify the code that twitter provide for the iframe embed. By using the advice found at: Twitter Embedded Timeline Callback
I've now fixed the problem by replacing:
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
with:
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";js.setAttribute('onload', "twttr.events.bind('rendered',function(e) {doTwitterHeight()});");fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
i.e. by adding:
js.setAttribute('onload', "twttr.events.bind('rendered',function(e) {doTwitterHeight()});");
You can try this:
$(window).on('load resize', doTwitterHeight).resize(); // <---trigger it on load
or as per your code piece:
$(window).on('resize', function(){
doTwitterHeight();
}).resize(); // <-----this triggers the resize on page load.