I have images in my page and if resulution of my page less than 768px my img src must change with data-tablet and if resulution of my page less than 480px my img src must change with data-mobil or if my resulution bigger than 768px img src must change with data-web or if my resulution bigger than 480 it must change with data-tablet I wrote some code for it but I guess there is something wrong with condition or syntax
$(document).ready(function(){
$(".box img").each(function(){
var getWeb = $(this).parents(".box").find("img").attr("data-web");
var getTablet = $(this).parents(".box").find("img").attr("data-tablet");
var getMobil = $(this).parents(".box").find("img").attr("data-mobil");
if ($(window).width() < 768) {
$(this).attr("data-src",getTablet);
}else if ($(window).width() < 480){
$(this).attr("data-src",getMobil);
}else if ($(window).width() > 480){
$(this).attr("data-src",getTablet);
}else if($(window).width() > 768)
{
$(this).attr("data-src",getWeb);
}
});
});
.box{
margin:10px;
float:left;
}
.box img{
width:300px;
}
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
</head>
<body>
<div class="box">
<img data-src="https://cdn.pixabay.com/photo/2017/01/18/21/34/cyprus-1990939_960_720.jpg" data-web="https://cdn.pixabay.com/photo/2017/01/18/21/34/cyprus-1990939_960_720.jpg" data-tablet="https://cdn.pixabay.com/photo/2017/01/31/09/30/raspberry-2023404_960_720.jpg" data-mobil="https://cdn.pixabay.com/photo/2017/01/20/15/12/ring-nebula-1995076_960_720.jpg" class="lazyload" />
</div>
<div class="box">
<img data-src="https://cdn.pixabay.com/photo/2017/01/20/15/06/orange-1995056_960_720.jpg" data-web="https://cdn.pixabay.com/photo/2017/01/20/15/06/orange-1995056_960_720.jpg" data-tablet="https://cdn.pixabay.com/photo/2014/06/29/12/46/apple-379373_960_720.jpg" data-mobil="https://cdn.pixabay.com/photo/2016/02/21/00/29/fruit-1213041_960_720.jpg" class="lazyload" />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/2.0.7/lazysizes.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
by the way just these code works
else if ($(window).width() > 480){
$(this).attr("data-src",getTablet);
}
and click to see project on codepen
You need to run your check for window width and run your code on the resize event
window.onresize = function(event) {
[your code]
};
Try putting your code inside a function and calling it when document is ready:
$(document).ready(function(){
checksize();
function checksize(){
$(".box img").each(function(){
var getWeb = $(this).parents(".box").find("img").attr("data-web");
var getTablet = $(this).parents(".box").find("img").attr("data-tablet");
var getMobil = $(this).parents(".box").find("img").attr("data-mobil");
if ($(window).width() < 768) {
$(this).attr("data-src",getTablet);
}else if ($(window).width() < 480){
$(this).attr("data-src",getMobil);
}else if ($(window).width() > 480){
$(this).attr("data-src",getTablet);
}else if($(window).width() > 768)
{
$(this).attr("data-src",getWeb);
}
});
}
});
Related
I tried to change the width of div dynamically while scrolling.But it is not working.I have jquery-1.11.3.min.js in my directory and connect it with HTML file.The scrollfunction in my script appears in brown color instead of black.
This is my HTML file
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="BooksExchanger.css"/>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<script src="BooksExchanger.js"></script>
<div id="packet"style="position:fixed">
<h1 id="welcome" >Welcome</p>
<h2 id="about">You Are Now Entering Into BBE</h2>
</div>
<img src="1.jpg"/>
<img src="2.jpg"/>
</body>
</html>
THis is my JS file(BooksExchanger.js)
$(document).ready(function(){
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if(scroll_pos < 10 ) {
$("#welcome").css('width', 75);
} else if(scroll_pos > 25 && scroll_pos < 75) {
$("#welcome").css('width', 100);
} else if(scroll_pos > 75 && scroll_pos < 100){
$("#welcome").css('width', 125);
}else if(scroll_pos > 100){
$("#welcome").css('width', 150);
}
});
});
try adding the scroll event to $(window) instead of $(document)
I'm simply tring to make changes to my webpage by scrolling the page. And in this code I am trying to change the background color of a div that is fixed in page. What is wrong with this code?
<!DOCTYPE html>
<html>
<head>
<title>jQuery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
body{
height: 5000px;
}
div{
height: 100px;
width: 100px;
background: red;
position: fixed;
top: 300px;
}
</style>
</head>
<body>
<div></div>
<script type="text/javascript">
function change(){
if( $(window).scrollTop() > 500 ){
$('div').css("background", "green");
} else{
$('div').css("background", "red");
}
}
change();
</script>
</body>
</html>
i think you should call it in .scroll() method:
$(function(){
$(window).on('scroll', function(){
change();
}).scroll();
});
or you can do shorten the code like this:
$(function(){
$(window).on('scroll', change).scroll();
});
Issue in your code is that you just called your function and that point of time the .scrollTop() value was 0 and it never gets updated.
so the solution is to put this function in an event of .scroll() the way suggested above. At every scroll it gets the new scrolltop position.
<script type="text/javascript">
$(document).scroll(function(){
if ($(window).scrollTop() > 500) {
$('div').css("background", "green");
} else {
$('div').css("background", "red");
}
});
</script>
Please try place your change within the document.ready..
other than that it looks OK.
<script type="text/javascript">
function change(){
if( $(window).scrollTop() > 500 ){
$('div').css("background", "green");
} else{
$('div').css("background", "red");
}
}
$(document).ready(function() {
change();
});
</script>
Instead of accessing $(window).scrollTop use $(document).scrollTop.
JQUERY CODE:
$(document).on('scroll',function () {
if( $(this).scrollTop() > 500 ){
$('aside').css("background", "green");
} else{
$('aside').css("background", "red");
}
});
$(document).scroll();
LIVE DEMO:
http://jsfiddle.net/dreamweiver/PBG9Z/15/
Happy Coding :)
I'm trying to implement this (http://www.hongkiat.com/blog/responsive-web-nav/) script for a responsive menu. I followed all the steps and used the proper code, but the menu won't open in a 320px screen width. Can anyone give me a heads up on how to fix this? FYI: I'm a newby in scripting.
Thanks a lot!
<?php
defined('_JEXEC') or die;
$doc = JFactory::getDocument();
$doc->addStyleSheet($this->baseurl . '/media/jui/css/bootstrap.min.css');
$doc->addStyleSheet($this->baseurl . '/media/jui/css/bootstrap-responsive.css');
$doc->addStyleSheet('templates/' . $this->template . '/css/style.css');
?>
<!DOCTYPE html>
<html>
<head>
<jdoc:include type="head" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="normalize.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function() {
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function() {
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
</script>
</head>
<body>
<nav class='clearfix'>
<ul class='clearfix'>
<li>Sea PR?</li>
<li>Sea PR voor...</li>
<li> Press Relations</li>
<li>Copywriting</li>
<li>Websites</li>
<li>Contact</li>
</ul>
Menu
</nav>
</body>
</html>
you may want to remove this:
$(window).resize(function() {
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
and replace it with
$(window).resize(function() {
if(menu.is(':hidden')) {
menu.removeAttr('style');
}
});
After go through the source of your demo site, it's turn out that you haven't included the nav.js file:
<script src="http://demo.hongkiat.com/_nav/js/nav.js" type="text/javascript"></script>
here I am trying to make my two id's #stop,#stop2 be fixed even after scrolling and make my #stop3 scroll till it reaches #footer once it reaches #footer both #stop,#stop2 should stop scrolling.here in my case both #stop,#stop2 are scrolling on to the #footer which should not happen, I dont know where I am going wrong, any help is accepted.Thank you in advance.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.one{width:100px;border:1px solid #CCC;height:200px;float:left;margin:0px 20px;background:#F00;}
.footer{width:100%;height:800px;background:#339;clear:both;}
</style>
</head>
<body>
<div class="scroller_anchor"></div>
<div id="stop" class="one"></div>
<div class="one" id="stop3" style="height:2000px;">
</div>
<div id="stop2" class="one"></div>
<div class="scroller_anchor1"></div>
<div class="footer" id="footer"></div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(window).scroll(function(e) {
var scroller_anchor = $(".scroller_anchor").offset().top;
var scroller_anchor1 = $(".scroller_anchor1").offset().top;
if ($(this).scrollTop() >= scroller_anchor && $("#stop,#stop2").css('position') != 'fixed')
{
$('#stop,#stop2').css({
'position': 'fixed',
'top': '0px'
});
$('#stop').css({
'left':'4%'
});
$('#stop2').css({
'right':'2%'
});
$('#stop3').css({
'left':'16.6%'
});
$('.scroller_anchor').css('height', '50px');
}
else if ($(this).scrollTop() > scroller_anchor1 && $('#stop,#stop2').css('position') != 'relative' )
{
$('#stop,#stop2,#stop3').css({
'position': 'relative',
'left':'inherit',
'right':'inherit'
});
}
else if ($(this).scrollTop() < scroller_anchor && $('#stop,#stop2').css('position') != 'relative' )
{
$('.scroller_anchor').css('height', '0px');
$('#stop,#stop2,#stop3').css({
'position': 'relative',
'left':'inherit',
'right':'inherit'
});
}
});
</script>
</html>
here is my fiddle jsfiddle.net/xPdD7
I've modified your js code a little bit for testing purposes, but all the hardcoded values can be changed to your particular needs:
$(window).scroll(function(e) {
var scroller_anchor = $(".scroller_anchor").offset().top;
var scroller_anchor1 = $(".scroller_anchor1").offset().top;
var footer = $(".footer").offset().top;
if ($(this).scrollTop() >= scroller_anchor && $("#stop,#stop2").css('position') != 'fixed')
{
$('#stop,#stop2').css({
'position': 'fixed',
'top': '8px'
});
$('#stop2').css({
'left':'280px'
});
$('#stop3').css({
'left':'140px'
}); }
if (($(this).scrollTop()+200) > footer )
{
$('#stop,#stop2').css({
'position':'absolute',
'top':'1800px'
});
}
});
Also here's an updated fiddle: http://jsfiddle.net/xPdD7/8/
Is this what you are trying to achieve?
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Frog</title>
<script type="text/javascript">
window.onscroll = infinity;
function infinity () {
document.write("<img src='frog.gif'>" + "<br/>");
}
while(window.onscroll){
infinity();
}
</script>
</head>
<body>
<img src='earth.png'>
<br/>
<img src='tiger.jpg'>
<br/>
</body>
</html>
Hi guys, I want to know how would I loop the frog when every time I scroll down the frog image appears again thanks in advance!
If you need to add image when user actually turns mouse wheel (even when no actual scrolling is involved) - you need to capture "mousewheel" event. Universally crossbrowser you can to it like this:
if (document.addEventListener) {
document.addEventListener("mousewheel", MouseWheelHandler, false);
document.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
}
else {
document.attachEvent("onmousewheel", MouseWheelHandler);
}
If you create a placeholder to hold your future images:
<div id="fdiv">Froggies:</div>
You can add images to it on mousewheeling like this:
function MouseWheelHandler(e) {
var e = window.event || e;
var delta = e.wheelDelta
if (delta < 0)
var img = document.createElement("img");
img.src = "frog.gif";
document.getElementById("fdiv").appendChild(img);
}
What this does is detects whether user scrolls mouse down (delta < 0) and if so - creates a new frog image and adds it to the DIV.
Here's demo: http://jsfiddle.net/Z8AxG/2/ place the mouse over window with words "Froggies:" and turn mouse wheel down.
What you could try is to make a div modify its height when you scroll down (using Javascript). Then apply the image on the background and let it repeat using CSS:
div#infinity {
background-image: url('frog.gif');
background-repeat: repeat-y;
}
With other words, this script will add images when you scroll down:
<!DOCTYPE html>
<html>
<head>
<title>TEST: Infinity Scroll</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
var lastScrollTop = 0;
$(window).scroll(function(event) {
var st = $(this).scrollTop();
if (st > lastScrollTop) {
$('div#infinity').append(
$('<div>').attr("id", "infinityimage")
);
}
else {
// upscroll code
}
lastScrollTop = st;
});
</script>
<style type="text/css">
html, body {
height: 101%;
}
div#infinityimage {
height: 190px;
background-image: url('https://www.google.nl/images/srpr/logo6w.png');
background-repeat: repeat-y;
}
</style>
</head>
<body>
<div id="infinity">
</div>
</body>
</html>