Change text when screen width is less than amount not working - javascript

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.");
}
})

Related

i want to hide the showmore button if the height of the div(ccontainer) is less than 550px

i want to hide the showmore button if the height of the div(ccontainer) is less than 550px and i will have more than one div and for each i will have a showmore button, and i already have a code that works (hides the btn) but it doesn't work for more than one button like if there are two divs it will hide the button of the first div but it just ignores the second one maybe that is because the code is implemented from top to bottom, so to sum it up what i want to do is that if div's height is less than 550px the show more button should be hidden and the code should also hide the second button for the second div.
and sorry for my broken English
code
js
// showmore btn show/hide
const btn = document.querySelector('.showmore');
const height = document.querySelector('#ccontainer').clientHeight;
btn.forEach(function(){
if (height <= 530) {btn.style.display = 'none';} else {btn.style.display = '';}
)}
html
<div class="ccontainer" id="ccontainer">
<p id="context"> content </p>
<div class="img" id="cntimgcon" >
<img src="images\image2.jpg" id="cntimgp1">
</div>
<p id="context"> content </p>
</div>
<Button class="showmore"> show more </button>
Your question is not fully understandable.But I think you are asking that hide the top most showmore button and display other showmore button when the upper ccontainer is less than 500px.Your styling of the button looks not good to me,but I didnt change it since this is a jquery question. Inorder to test this code I duplicate same html code you have provided. And added image url for display the image since you didnt provide image resource.And I added window.onload function in order to execute your targeted function after the page loads.
working sanbox.
I need to mention that you used const btn= document.querySelector('.showmore').But It should be change to const btn =document.querySelectorAll(".showmore");.
querySelector only select the first element but querySelectorAll return you a list of node.
html code
<div class="ccontainer" id="ccontainer">
<p id="context">content</p>
<div class="img" id="cntimgcon">
<img
src="https://crdms.images.consumerreports.org/c_lfill,w_470,q_auto,f_auto/prod/cars/chrome/white/2018TOC310001_1280_01"
id="cntimgp1"
height="25px"
width="auto"
/>
</div>
<p id="context">content</p>
</div>
<button class="showmore">show more</button>
<div class="ccontainer" id="ccontainer">
<p id="context">content</p>
<div class="img" id="cntimgcon">
<img
src="https://crdms.images.consumerreports.org/c_lfill,w_470,q_auto,f_auto/prod/cars/chrome/white/2018TOC310001_1280_01"
id="cntimgp1"
height="25px"
width="auto"
/>
</div>
<p id="context">content</p>
</div>
<button class="showmore">show more</button>
js code
<script>
window.onload = function () {
const btn = document.querySelectorAll(".showmore");
const height = document.querySelector("#ccontainer").offsetHeight;
btn.forEach(function (single, index) {
if (height <= 500 && index == 0) {
single.style.display = "none";
} else {
single.style.display = "block";
}
});
};
</script>

Auto image slider that starts from the beginning infinitely

As the sketch above shows, I need a slider gallery where four images slide to left one by one automatically. As the fourth image leaves, the first one follows as if it were the fifth.
How can I achieve this goal, without any plugins, just CSS and a little bit JavaScript?
Please check below code
<script type="text/javascript" src="js/jquery.flexislider.js"></script>
<div id="slider">
<div id="imageloader" style="display: none;">
<img src="images/header-logos_04.jpg" />
</div>
<img src="images/header-logos_04.jpg" />
<img src="images/header-logos_05.jpg" />
<img src="images/header-logos_02.jpg" />
<img src="images/header-logos_03.jpg" />
<img src="images/header-logos_02.jpg " />
<img src="images/header-logos_03.jpg" />
</div>
jquery.flexislider.js
jQuery(window).load(function(){
pic = jQuery("#slider").children("img");
numImgs = pic.length;
arrLeft = new Array(numImgs);
for (i=0;i<numImgs;i++){
totalWidth=0;
for(n=0;n<i;n++){
totalWidth += jQuery(pic[n]).width();
}
arrLeft[i] = totalWidth;
jQuery(pic[i]).css("left",totalWidth);
}
myInterval = setInterval("flexiScroll()",speed);
jQuery('#imageloader').hide();
jQuery(pic).show();
});
function flexiScroll(){
for (i=0;i<numImgs;i++){
arrLeft[i] -= 1;
if (arrLeft[i] == -(jQuery(pic[i]).width())){
totalWidth = 0;
for (n=0;n<numImgs;n++){
if (n!=i){
totalWidth += jQuery(pic[n]).width();
}
}
arrLeft[i] = totalWidth;
}
jQuery(pic[i]).css("left",arrLeft[i]);
}
}
The idea is to insert the images one at a time into HTML and have them take on the banner functionality, the tricky part that we couldn't repeat anything in HTML so keyframe should be used to animate it,
Check that article for the complete solution, and that live demo

Replace a smaller image with a larger one (after the larger image loads)

I have a few images of superheroes. These are in divs along with much larger images of astronomical objects. These larger images take a while to load. I want the astronomical images to replace the superhero images after they've loaded.
Here's what I have so far: https://jsfiddle.net/vmpfc1/5typ7pnp/1/
HTML:
<body>
<div class="image-wrapper">
<div class="pix"style="background: url('http://baltimorepostexaminer.com/wp-content/uploads/2012/07/spider-man2_pole_4681.jpg'); height:200px;width:200px;">
</div>
<div class="true-image" style="background: url('http://m1.i.pbase.com/o9/27/876727/1/151851961.JlvdQ9xW.GreatCarinaKeyholeandRedHoodNebulae3454x2566pixelsimproved3.jpg')"></div>
</div>
<div class="image-wrapper">
<div class="pix"style="background: url('https://upload.wikimedia.org/wikipedia/en/7/75/Comic_Art_-_Batman_by_Jim_Lee_%282002%29.png'); height:200px;width:200px;">
</div>
<div class="true-image" style="background:url(' https://www.nasa.gov/sites/default/files/706439main_20121113_m6triptych_0.jpg')"></div>
</div>
</body>
js:
setTimeout(function () {
$('.true-image').attr('style').on('load', function () {
$('.pix')({
'background-image': 'url(' + $(this).attr('src') + ')'
});
});
}, 0);
css:
.true-image {
display : none;
}
I am a javascript newbie -- is there a decent way to make the larger space images replace the superhero placeholders?
Is there an easier way to do this in HTML5?
Edited Answer to reflect changes:
<div style="background-image: url('https://i.imgur.com/sOcRl3M.jpg'); height:400px;width:400px" rel="https://i.imgur.com/xr7CRQo.jpg">
</div>
<div style="background-image: url('https://i.imgur.com/1m0NwgN.png'); height:400px;width:400px" rel="https://i.imgur.com/nlFPkc4.jpg">
</div>
Then you can have jQuery to loop through all images which has a rel attribute. 2 or 2,000 images, it does not matter.
$('div[rel]').each(function() {
var rel = $(this).attr('rel');
var self = $(this);
var img = new Image();
$(img).load(rel, '', function() {
self.css('background-image', 'url('+rel+')');
});
});
You can see it working here: https://jsfiddle.net/83zLumuk/4/

jQuery .wrap .unwrap responsive

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>" ));}

If image width is less than X, add class

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

Categories

Resources