I'm following the indications on the post:
jQuery fadeIn() different intervals with multiple div's
but i just cant get it to work.. what is wrong
<!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>
<script type="text/javascript">
$('.fadeIn').each(function(){
var $this = $(this);
$this.before('<div> </div>');
setTimeout(function(){
$this.prev().remove();
$this.fadeIn(Math.floor(Math.random()*1500));
}, Math.floor(Math.random()*1500));
}
);
</script>
<style>
.fadeIn{
display: none;
}
</style>
</head>
<body>
<div class="fadeIn">Test 1</div>
<div class="fadeIn">Test 2</div>
<div class="fadeIn">Test 3</div>
<div class="fadeIn">Test 4</div>
<div class="fadeIn">Test 5</div>
<div class="fadeIn">Test 6</div>
</body>
</html>
demo in action
You have to import the jQuery library!
Add it Before your <script>:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
it should look like:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
(function($){ // remap the '$' character to jQuery
$('.fadeIn').each(function(){
var $this = $(this);
$this.before('<div> </div>');
setTimeout(function(){
$this.prev().remove();
$this.fadeIn(Math.floor(Math.random()*1500));
}, Math.floor(Math.random()*1500));
)};
})(jQuery);
</script>
Or use the $(document).ready(function(){ /*your code here*/ }); !
1) You need to include the jquery library
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
2) You need to wrap your code in a $(function() or jQuery(function($)
jQuery(function($) {
$('.fadeIn').each(function(){
var $this = $(this);
$this.before('<div> </div>');
setTimeout(function(){
$this.prev().remove();
$this.fadeIn(Math.floor(Math.random()*1500));
}, Math.floor(Math.random()*1500));
}
);
});
You need to do the update your code :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('.fadeIn').each(function () {
var $this = $(this);
$this.before('<div> </div>');
setTimeout(function () {
$this.prev().remove();
$this.fadeIn(Math.floor(Math.random() * 1500));
}, Math.floor(Math.random() * 1500));
});
})
</script>
The
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
adds the jQuery library to your page - this enables you to use the jQuery functions. And you need to wrap your code in the
$(function() {
});
block so that it doesnt execute until the DOM is ready .. See the docs here
Firstly here is the fiddle with your code working.
All you didn't do was import the jquery library in your head element.
Related
please, help, I try to get href of links inside div using jquery, but unfortunatelly, it doesn`t work.
Here is my page, where I dynamically get other divs(inside them links are located) inside #films
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cinemas</title>
</head>
<body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<div id = "films"></div>
<script src="script.js"></script>
</body>
</html>
Here is my script.js:
$(document).ready(function() {
$.get(myUrl, function(data) { // this block works
$('#films').html($('.block_afisha', data).html())
});
$('#films').find('a').each(function() { // there is no iterations here
console.log($(this).attr('href'));
});
});
How can I fix it?
You can try this code -
$(document).ready(function() {
$.get(myUrl, function(data) { // this block works - async block
$('#films').html($('.block_afisha', data).html());
$('#films').find('a').each(function() { // this will work if above call has added links with anchor tag
console.log($(this).attr('href'));
});
});
});
You can just load the links and then iterate through them:
<div id="elems">
One
Two
Three
</div>
$.each($('#elems > a'),function(data,value){
console.log($(value).attr('href'));
});
I'm having trouble getting the following to work:
$('#elem').trigger('click');
When I run it, it doesn't trigger a click but it doesn't show any error logs in the console either.
I've also tried the following with no luck:
$('#elem')[0].click();
Any ideas as to what could be going wrong or a solution for this?
Update: Jquery is working and when I inspect the element, #elem does appear (it's an id for a button)
HTML:
<a:button id="elem">My Button</Button>
JQuery:
P.when('A', 'jQuery').execute(function (A, $) {
//when this function is called, it should trigger a button click
triggerButtonClick = function() {
$('#elem').trigger('click');
};
});
Try it in document.ready function, then all dom loads when the document is ready.You can do something like this based on your requirement.
$( document ).ready(function() {
$('#radio').click(function(){
$('#elem')[0].click();
})
});
i have tried this code and it works
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("chk1").click(function(){
$('#usr').trigger('click');
});
});
</script>
</head>
<body>
<form action="sample.php">
<button id="chk1">click</button>
<input class="form-control" type="submit" id="usr">
</form>
</body>
</html>
this code works for me:
$(window).load(function() {
$('#menu_toggle').trigger('click');
});
$(document).ready(function () {
$('#elem').click(function () {
alert('clicked');
$(this).css('color', 'red');
});
$('#elem').trigger('click');
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<body>
<div id="elem" >test</div>
</body>
</html>
I just started using jQuery, then forgive me for noobish.
What I'm trying to do is 'get reference to a object that is wrapped in a class', but there are more classes with same name.
How can I reach the right object and get the reference to it, when the only thing that will differ it from a thousand other more objects is the text inside the div.
In this case, I'm trying to show only the text "this should be returned", that is under the classes 'ng-anyclass'.
After that, will be possible store the reference to that specific div and change it text? Or any other properties?
Here's the code:
Page 1 - the loader:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
var s = $('#result').load('Page2.html .ng-anyclass .ng-anyclass .ng-anyclass');
});
</script>
</head>
<body>
<div id="result"></div>
<div>Other Stuff Here</div>
</body>
</html>
Page 2 - the target page
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div class="ng-anyclass">
<div class="ng-anyclass">
<div class="ng-anyclass">this should be returned</div>
</div>
<div class="ng-anyclass">
<div class="ng-anyclass">not this</div>
</div>
</div>
</body>
</html>
You can use :eq(0) for this:
jQuery(function($) {
$('#result').load('page2.html .ng-anyclass .ng-anyclass .ng-anyclass:eq(0)', function(){
var _this = $(this)
setTimeout(function(){
_this.find('.ng-anyclass').text('changed');
},1000);
});
});
updated plnkr Demo.
If you want to write text somewhere you can use CSS selector, like this :
$('body .ng-anyclass .ng-anyclass:eq(0) .ng-anyclass').text('your text')
eq(0) it's a shortcut of first-child, or eq(1) is nth-child(2) for example
I hope it will be help you
I am using the following code to make a custom checkbox with my own images.
First I included JQuery and added the JQuery code for the required functionality:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#moreinfo").change(function() {
if(this.checked) {
$(this).prev().attr("src", "checkbox_unchecked.gif");
} else {
$(this).prev().attr("src", "checkbox_checked.gif");
}
});
});
</script>
Next...here's the HTML:
<label for="moreinfo">
<img src="checkbox_unchecked.gif"/>
<input name="moreinfo" type="checkbox" id="moreinfo" style="display:none">
</label>
The unchecked image is there but when I click on it, it doesn't change/toggle.
I'm I missing something?
UPDATE:
Testing this full code locally and it's not working...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#moreinfo").change(function() {
if(this.checked) {
$(this).prev().attr("src", "http://icdn.pro/images/en/v/e/verify-correct-icone-9268-48.png");
} else {
$(this).prev().attr("src", "http://www.theology.edu/Remata/Android/Help/wrongx_icon.png");
}
});
});
</script>
</title>
</head>
<body>
<label for="moreinfo">
<img src="http://www.theology.edu/Remata/Android/Help/wrongx_icon.png"/>
<input name="moreinfo" type="checkbox" id="moreinfo" style="display:none">
</label>
</body>
</html>
It's working, you can check it here.
$("#moreinfo").click(function() {
var $img = $(this).prev();
$img.attr("src", ($(this).checked)?"checkbox_checked.gif":"checkbox_unchecked.gif");
});
Is it possible to change the text inside a separate div from a mouseover over a separate link? Would anyone know where to direct me or show me an example?
It takes a simple javascript to do this
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function changeContent()
{
document.getElementById("myDiv").innerHTML='New Content';
}
</SCRIPT>
</HEAD>
<BODY>
<div id="myDiv">
Old Content
</div>
Change Div Content
</BODY>
</HTML>
Here an small example with jquery:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".pass").hover(
function () {
$(".change").text("MOUSE HOVER");
},
function () {
$(".change").text("DIV TO CHANGE");
}
);
});
</script>
</head>
<body>
<div class="pass">PASS YOUR MOUSE OVER HERE</div>
<div class="change">DIV TO CHANGE</div>
</body>
</html>
You could use a Javascript library like JQuery
for example:
$('#youranchorid').mouseover(function() {
$('#yourdivid').html("Your new text");
});
check the API