I got this code:
<!DOCTYPE html>
<head>
<title>bla</title>
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
<script type='text/javascript' src='http://code.jquery.com/jquery-git2.js'></script>
</head>
<body>
<script language="javascript" type="text/javascript">
$("#left").children(".thumb").on({
mouseenter: function () {
$("#preview").attr("src", $(this).attr("src")).show();
},
mouseleave: function () {
$("#preview").hide();
}
});
</script>
<div id="left">
<img src="http://sereedmedia.com/srmwp/wp-content/uploads/kitten.jpg" class="thumb" />
<img src="http://www.warrenphotographic.co.uk/photography/bigs/36522-Tabby-kitten-white-background.jpg" class="thumb" />
<img src="http://www.warrenphotographic.co.uk/photography/bigs/11406-Ginger-kitten-rolling-on-its-back-white-background.jpg" class="thumb" />
<img id="preview" />
</div>
</body>
And CSS:
#preview
{
background:#333;
border: solid 1px #000;
display: none;
color: #fff;
width: 200px;
}
All that from: http://jsfiddle.net/chrissp26/sd3ouo9g/ But it's not working by me like there, what could be the issue?
try putting it inside a $(document).ready like this :
$(document).ready(function() {
$("#left").children(".thumb").on({
mouseenter: function () {
$("#preview").attr("src", $(this).attr("src")).show();
},
mouseleave: function () {
$("#preview").hide();
}
});
});
You are referencing DOM elements before the page is fully loaded. The only reason that code works in the JSFiddle you referenced is that they selected the onLoad option:
As Yourness suggests, use a DOM ready handler (which the JSFiddle onLoad does for you).
The shortcut versions of $(document).ready(function(){...}); are:
$(function(){...});
<script language="javascript" type="text/javascript">
$(function(){
$("#left").children(".thumb").on({
mouseenter: function () {
$("#preview").attr("src", $(this).attr("src")).show();
},
mouseleave: function () {
$("#preview").hide();
}
});
});
</script>
Or the more robust version (which scopes a local $ at the same time):
jQuery(function($){...});
<script language="javascript" type="text/javascript">
jQuery(function($){
$("#left").children(".thumb").on({
mouseenter: function () {
$("#preview").attr("src", $(this).attr("src")).show();
},
mouseleave: function () {
$("#preview").hide();
}
});
});
</script>
Option 3:
Or you can simply put your existing <script> block at the bottom of the body element (after the elements it references).
<body>
<div id="left">
<img src="http://sereedmedia.com/srmwp/wp-content/uploads/kitten.jpg" class="thumb" />
<img src="http://www.warrenphotographic.co.uk/photography/bigs/36522-Tabby-kitten-white-background.jpg" class="thumb" />
<img src="http://www.warrenphotographic.co.uk/photography/bigs/11406-Ginger-kitten-rolling-on-its-back-white-background.jpg" class="thumb" />
<img id="preview" />
</div>
<script language="javascript" type="text/javascript">
$("#left").children(".thumb").on({
mouseenter: function() {
$("#preview").attr("src", $(this).attr("src")).show();
},
mouseleave: function() {
$("#preview").hide();
}
});
</script>
</body>
Related
I'm using jQuery and I'm trying to fade images out and in. Well, it's kinda weird, the image sometimes stays for much longer than expected, sometimes there's no fade, sometimes it only fades in.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
var interval;
function startSlider() {
console.log("Slider Started.");
interval = setInterval(function () {
$(".slides > li:first")
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo(".slides");
}, 5000);
}
startSlider();
</script>```
My assumption is that your internet is probably slowing down the execution of the code. If you switch to a different network, or run on a mobile connection, does the fade work as expected?
To ensure the sliding, you can put startSlider() inside jQuery document ready() event.
$(document).ready(function() {
startSlider();
});
here is a test:
<html>
<head>
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var interval;
function startSlider() {
console.log("Slider Started.");
interval = setInterval(function () {
$(".slides > li:first")
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo(".slides");
}, 5000);
}
$(document).ready(function() {
startSlider();
});
</script>
</head>
<body>
<ul class="slides">
<li>item 1 <img src="https://i.imgur.com/HHSuvHp.png" style="width: 100px; height: 100px;"></li>
<li>item 2 <img src="https://i.imgur.com/oKe8JBR.png" style="width: 100px; height: 100px;"></li>
</ul>
</body>
</html>
Thank you all for trying to help, I'm not sure what the issue is but I've messed with the code and now it works:
$(function() {
$('.image img:gt(0)').hide(); // to hide all except the first image when da page loads
setInterval(function() {
$('.image :first-child').fadeOut(1000)
.next().fadeIn(1000).end().appendTo('.image');
}, 3000);
})
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap');
.image {
position: relative;
}
.image img {
width: 100%;
position: absolute;
border-radius: 2%;
}
.h {
text-align: center;
}
.a {
font-family: 'Poppins', sans-serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>stuff</title>
</head>
<body>
<div class="h">
<h1 class="a">Automatic image transitions</h1>
</div>
<div class="image">
<img src="https://images.unsplash.com/photo-1593642532009-6ba71e22f468?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80" />
<img src="https://images.unsplash.com/photo-1620393470010-fd62b8ab841d?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" />
<img src="https://images.unsplash.com/photo-1620406968602-f7e7cd9febce?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw3fHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" />
<img src="https://images.unsplash.com/photo-1620415406067-68f6d8072fec?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxNnx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" />
<img src="https://images.unsplash.com/photo-1620398399445-a5359701d43c?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyNXx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" />
<img src="https://images.unsplash.com/photo-1620416530190-506ac680d67f?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyNnx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" />
<img src="https://images.unsplash.com/photo-1620321268133-000441fd17aa?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw4OHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" />
<img src="https://images.unsplash.com/photo-1620399489382-8e77838306ff?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw4OXx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>
</html>
I tried to create image rotate but it's not working. I tried different codes from different sites but don't know what's wrong.
This is my code.
var value = 0
$("#image").rotate({
bind:
{
click: function(){
value +=90;
$(this).rotate({ animateTo:value})
}
}
});
#image{
margin:200px 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.sobekrepository.org/includes/jquery-rotate/2.2/jquery-rotate.min.js"></script>
<script type="text/javascript" src="http://beneposto.pl/jqueryrotate/js/jQueryRotateCompressed.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<img src="http://jqueryrotate.com/images/chrome_32x32.png" id="image" onclick="" />
In your example, jQuery is not defined, check this code:
var value = 0
$("#image").rotate({
bind: {
click: function() {
value += 90;
$(this).rotate({
animateTo: value
})
}
}
});
#image {
margin: 200px 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="include/jQueryRotate.js"></script>
<script type="text/javascript" src="http://beneposto.pl/jqueryrotate/js/jQueryRotateCompressed.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<img src="http://i.forbesimg.com/media/lists/companies/apple_416x416.jpg" id="image" onclick="" />
I wish to link different sites to the pictures.
All I did is link the pictures to the same link.
So I want to link each pictures to the different website.
<!DOCTYPE html>
<html>
<head>
<style>
#rectangle{
width:2500px;
position:absolute;
margin-left:200px;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function () {
$('.crimson').css('width', 250);
setInterval(function () {
$('.crimson').first().appendTo('#rectangle a' );
}, 2000);
});
</script>
</head>
<body>
<div id="rectangle">
<a href="html/Main.html">
<img class="crimson"src="../pictures/CS151120.jpg"/>
<img class="crimson" src="../pictures/CS151204.jpg" />
<img class="crimson" src="../pictures/CS151218.jpg" />
<img class="crimson" src="../pictures/CS151231.jpg" /></a>
</div>
</body>
</html>
So adding 'a' behind the appendTo rectangle is the best thing I can do.
Try wrapping each picture in to individual <a></a>
<img class="crimson"src="../pictures/CS151120.jpg"/>
<img class="crimson" src="../pictures/CS151204.jpg" />
<img class="crimson" src="../pictures/CS151218.jpg" />
<img class="crimson" src="../pictures/CS151231.jpg" />
$(document).ready(function () {
$('.crimson').css('width', 250);
setInterval(function () {
// $('.crimson').first().appendTo('#rectangle a');
}, 2000);
$('#rectangle .crimson').each(function () {
link = "html/Main" + $(this).index() + ".html";
$(this).wrap("<a href='"+link+"'/>");
});
});
Works
$("a").on("click", function(e) {
alert(1);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
Link
</div>
Does not work
$("a").on("click", function(e) {
alert(1);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
Link
</div>
<iframe id="myIframe" src="" style="width: 200px; height: 200px;" />
Because your markup is invalid. iframe is not a void element. You should close the iframe properly.
The first rendered HTML in my Chrome browser:
<html><head>
<style>
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
Link
</div>
<script type="text/javascript">
$("a").on("click", function(e) {
alert(1);
});
</script>
</body></html>
The second one:
<html><head>
<style>
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
Link
</div>
<iframe id="myIframe" src="" style="width: 200px; height: 200px;">
<script type="text/javascript">
$("a").on("click", function(e) {
alert(1);
});
</script>
</body>
</html></iframe></body></html>
I have such a webpage with some jQuery using http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css
I would like to define the "highlight row" behavior but somehow I cannot override it as long as I am using jQuery's theme mentioned above.
My code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$( "#tabs" ).tabs();
$( document ).tooltip();
$("tbody > tr:even").addClass("even");
$("tbody > tr:odd").addClass("odd");
$("#company_row ~ tr").bind( "mouseover", function(e){
$(this).toggleClass("highlight");
});
$("#company_row ~ tr").bind( "mouseout", function(e){
$(this).toggleClass("highlight");
});
});
</script>
</head>
<body>
<style>
tr.even { background-color: #efefef; }
tr.odd { background-color: #fff; }
.highlight { background-color: #fffdcd !important; }
</style>
<div id="tabs">
<ul>
<li>Companies</li>
<li>People</li>
</ul>
<div id="tabs-1">
<table border='2' id="companies"></table>
</div>
<div id="tabs-2">
<table border='2' id="people"></table>
</div>
</div>
</body>
</html>
I have also tried this
$("#companies").hover(
function () {
$(this).css("background","yellow");
},
function () {
$(this).css("background","");
}
);
Try replacing the tr:even and tr:odd selectors with tr:nth-child(even)
You should not have to use jQuery at all to apply these styles, trying using a rule with a form similar to:
tbody > tr:nth-child(even):hover {
background-color: #efefef;
}