Forgive me, I am fairly new to javascript. I am trying to remove a div's parent below 980px wide and then add it back in above 980px. I am using the following code that I have put together from looking at other jQuery.
jQuery(window).resize(function () {
var Tags = jQuery( ".case-studies .items-row div.span4" );
var wi = jQuery(window).width();
if (wi < 980) {
if ( Tags.parent().is( "div.items-row.cols-3.row-0.row-fluid" ) ) {
Tags.unwrap();
}
} else {
(Tags.wrap.parent( "<div .items-row.cols-3.row-0.row-fluid></div>" ));}
});
I'm guessing you will realise I am experiencing a few issues!
The jQuery doesn't apply below 980px on page load, however when you start with a large screen size and shrink the width below 980px the jQuery works.
Once the jQuery has fired and the screen size goes above 980px, the div that has been removed does not get reapplied.
Please explain where I have gone wrong as I would like to learn.
Thanks for your time
UPDATE
The html before any jQuery is:
<section>
<div class="items-row cols-3 row-1 row-fluid">
<div class="span4"></div>
</div>
</section>
With the following jQuery:
jQuery(window).load(function () {
var Tags = jQuery( ".case-studies .items-row div.span4" );
var wi = jQuery(window).width();
if (wi < 980) {
if ( Tags.parent().is( "div.items-row.cols-3.row-0.row-fluid" ) ) {
Tags.unwrap();
}
}
else {
Tags.wrap( "<div></div>");
}
});
This now occurs above 980px on page load:
<section>
<div class="items-row cols-3 row-1 row-fluid">
<div>
<div class="span4"></div>
</div>
</div>
</section>
And when i refresh the page below 980px:
<section>
<div class="span4"></div>
</section>
The result below 980px is correct, however only runs when i refresh the screen. The result above 980px is not my intended result, i would like it to remain or return to:
<section>
<div class="items-row cols-3 row-1 row-fluid">
<div class="span4"></div>
</div>
</section>
#1: Call the function once on page load, that way you don't need to resize to get it
#2:
else {
(Tags.wrap.parent( "<div .items-row.cols-3.row-0.row-fluid></div>" ));}
should be
else {
(Tags.wrap( "<div .items-row.cols-3.row-0.row-fluid></div>" ));}
Related
I'm trying to change the text on this website when the screen size is less than 650, but it's not working. I've tried the answers from Do something if screen width is less than 960 px and Resizing images when screen is less than 1024 pixels width, which did not work. Here is the link to the replit, and the code snippet is also below.
if ($(window).width() < 650) { // I've also tried (window).width() and window.width
var words = $('.words');
words.text("Hello! This is the new text!");
}
else {
}
<div class="intro">
<div>
<h1 class="ele">Hey there!</h1>
<p class="ele words">Hi! This is the old text."</p>
</div>
<img class="ele me" src="me.png" alt="A picture of myself.">
</div>
I tried your code on CodePen and it seems to work fine, maybe your script is being loaded in the wrong place or the elements you're trying to change where not created yet, maybe some more code could help
see the example
<div class="intro">
<div>
<h1 class="ele">Hey there!</h1>
<p class="ele words">Hi! This is the old text."</p>
</div>
<img class="ele me" src="me.png" alt="A picture of myself.">
</div>
$(window).resize(function() {
if ($(window).width() < 650) {
var words = $('.words');
words.text("Hello! This is the new text!");
}
else {
var words = $('.words');
words.text("Hello! This is the old text.");
}
})
My problem is that i want to add the parallax effect (rellax class) to the class home-content when the screen size is above 810 px and remove it when its below. Plus, if possible i want to be able to add data-rellax-speed = "-4" when rellax is enabled.
The problem is that i have the error : rellax.js:141 Rellax: The elements you're trying to select don't exist. Surelly because it does not find .relax in HTML
Here is the HTML code of the section with .home-content
<section class="home content" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1 stagger1">👋 Bonjour, je suis</div>
<div class="text-2 stagger1">Eric</div>
<div class="text-3 stagger1">Et je suis un <span class="crimson" id="typing"></span></div>
<a class="stagger2" href="#contact">Me contacter</a>
</div>
</div>
</section>
Here is the JS so far (i am using Rellax.js in order to achieve parallax):
$(document).ready(function(){
// Parallax
var rellax = new Rellax('.rellax');
if(window.innerWidth < 810){
$('.home-content').removeClass('rellax');
}
})
$(window).resize(function(){
if(window.innerWidth < 810){
$('.home-content').removeClass('rellax');
}else{
$('.home-content').addClass('rellax');
}
});
Check for relax class or element before referencing:
var rellax;
$(document).ready(function(){
if ($('.rellax').length) rellax = new Rellax('.rellax');
if(window.innerWidth < 810) {
$('.home-content').removeClass('rellax');
}
})
$(window).resize(function(){
if(window.innerWidth < 810) {
rellax.destroy();
$('.home-content').removeClass('rellax');
} else {
$('.home-content').addClass('rellax');
rellax = new Rellax('.rellax')
}
});
So basicly I want to have 2 buttons (one for map and one for recent posts). I implemented it by making jQuery script for the hiding/showing the divs as it follows:
<div id="main-choice" style="height:100%; width:100%;">
<button class="buttons" id="button-region">News by regions</button>
<button class="buttons" id="button-latest-news">Latest news</button>
</div>
<div class="hide" id="world-map-chosen" style="width:100%;"><button id="back-to-choice-1">Back</button>
<?php build_i_world_map(1); ?></div>
<div class="hide" id="latest-news-chosen" style="height:400px; width:100%;"><button id="back-to-choice-2">Back</button>
<?php echo get_new_royalslider(1); ?> </div>
<script>
$("#world-map-chosen").hide();
$("#latest-news-chosen").hide();
$('#button-region').click(function() {
$('#main-choice').fadeOut('slow', function() {
$("#world-map-chosen").fadeIn("slow");
});
});
$('#button-latest-news').click(function() {
$('#main-choice').fadeOut('slow', function() {
$("#latest-news-chosen").fadeIn("slow", function(){
fireOnResizeEvent();
});
});
});
$('#back-to-choice-1').click(function() {
$('#world-map-chosen').fadeOut('slow', function() {
$("#main-choice").fadeIn("slow");
});
});
$('#back-to-choice-2').click(function() {
$('#latest-news-chosen').fadeOut('slow', function() {
$("#main-choice").fadeIn("slow");
});
});
</script>
</div>
and in the head tag:
<script language="JavaScript" >
function fireOnResizeEvent() {
var width, height;
if (navigator.appName.indexOf("Microsoft") != -1) {
width = document.body.offsetWidth;
height = document.body.offsetHeight;
} else {
width = window.outerWidth;
height = window.outerHeight;
}
window.resizeTo(width - 1, height);
window.resizeTo(width + 1, height);
}
window.onresize = function() {
alert("Resized!");
}
</script>
My issue is that the slider and the map are taking the hidden state size and not refreshing when shown by the script.
As you can see i tried to include a function in the jQuery that resize the window after the load, but without luck.
Both the functions for loading the map and the slider are working correctly.
Could you please help me solve this one by helping me fix this code or give me some ideas how should i make it?
I am calulating the childrens height, to add the scrollbar to the container. but it's not come as perfect. any one help me to calculate the childrens height perfectly?
here is my js :
var p= "</p>Some testing text</p>";
var getAllHeight = function (content) {
var allHeight = 0;
$('#container').children().not('.content').each(function(){
allHeight += $(this).outerHeight(true);
});
return allHeight;
}
var addHeight = function () {
var content = $('.content');
var allHeight = getAllHeight(content);
var rest = $('#container').innerHeight() - allHeight;
if(content.outerHeight() > rest) {
content.css('height', (content.outerHeight() - allHeight ));
}
console.log(allHeight, content.height(), content.outerHeight(),content.innerHeight())
};
$('button').click(function(){
$('.content').append(p);
addHeight();
});
<div id="container">
<div>
<h2>Heading</h2>
</div>
<div>
<h2>Heading</h2>
</div>
<div class="content">
</div>
<div class="footer">
Footer
</div>
<div class="button"><button>Add</button></div>
</div>
JSfiddle
This is CSS issue due to collapsing margins (read "Parent and first/last child" case) on div>h2 structure. Since div containers don't have any padding, margin or border, their margins collapse to accommodate inner margin. Simple fix is to set some padding on them or border or set h2 to inline-block.
Another issue is that when there is not enough space you should set content height to rest.
if (content.outerHeight() > rest) {
content.css('height', rest);
}
Demo: http://jsfiddle.net/doesfmnm/5/
As the title suggests, I'm looking to have a little bit of jQuery - if an image is less than a defined width, it adds a class a certain element. This, for me, seems pretty easy but for some reason it's not working.
$(document).ready(function() {
var image = $('.work-each img');
if (image.width() < 500) {
$('.work-text').addClass('work-text-small');
}
});
This, should, add a class 'work-text-small' to the element 'work-text' if the image found under each .work-each is less than 500px.
Example of HTML (for each)
<div class="work-each">
<div>
<img src=""/>
<div class="work-text">
<p>Title</p>
<p>Text</p>
</div>
</div>
</div>
<div class="work-each">
<div>
<img src=""/>
<div class="work-text">
<p>Title</p>
<p>Text</p>
</div>
</div>
</div>
<div class="work-each">
<div>
<img src=""/>
<div class="work-text">
<p>Title</p>
<p>Text</p>
</div>
</div>
</div>
Thanks,
R
Use load instead, when DOM is ready only img tag is defined but the image isn't loaded yet. Its size comes when it's fully loaded
$(window).load(function () {
var image = $('.work-each img');
if (image.width() < 500) {
$('.work-text').addClass('work-text-small');
}
});
However as #rdck pointed if there are more images with class=".work-each img" code won't work so in that case you go trough each image and apply the class
$(window).load(function () {
var image = $('.work-each img');
image.each(function () {
var that = $(this);
if (that.width() < 500) {
that.next('div.work-text').addClass('work-text-small');
}
})
});
If you get dimensions using server code and set class accordingly, there would be no need to wait for image to load and css would immediately take effect as soon as html exists