Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
<html>
<body>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('img').click(function(){
var getTitle = $(this).attr('alt');
alert(getTitle)
});
</script>
</head>
<body>
<img src="http://localhost/wordpress/wp-content/uploads/2013/02/chair-228x300.jpg" alt="alt" width="228" height="300" class="size-medium wp-image-92" />
</body>
</html>
This will basically display the alt attribute of the image in a popup once clicked but it seems not working. What am I missing? Please help.
The DOM is not ready to be manipulated/accessed when your code executes. Use the document.ready shortcut:
$(function(){
$('img').click(function(){
var getTitle = $(this).attr('alt');
alert(getTitle)
});
});
Wrap your jQuery in a document ready call.
$(document).ready(function() {
$('img').click(function(){
var getTitle = $(this).attr('alt');
alert(getTitle);
});
});
You're executing your code before the actual elements you want to apply it to have been loaded.
You need to wait for the DOM to fully load.
$(function() {
// your code goes here
});
example: http://jsfiddle.net/4Y6sL/
Try this
JS CODE
$(function(){
$('img').on('click', function(){
var getTitle = $(this).attr('alt');
alert(getTitle)
});
});
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 months ago.
Improve this question
I do not know where to put the function
setTimeout('history.go(0);', 10000)
how do I code on a page?
One place you could put it is here:
<html>
<head>
<script>
setTimeout('history.go(0);', 10000)
</script>
<head>
<body>
..
</body>
</html>
another, better way is to write the script as follows
<html>
<head>
<script>
//console.info('initial load');
addEventListener('DOMContentLoaded', function () {
setTimeout(function () {
//console.info('reloading');
window.location.reload();
}, 10000);
})
</script>
<head>
<body>
my body
</body>
</html>
because this will wait for the whole document to be loaded before executing.
I would recommend reading up on AJAX and only fetching the parts you need as an asynchronous event, instead of loading the whole page again and again...
You don't even need a script...
Just add
<meta http-equiv="refresh" content="10">
in the headers.
Why do you try to do this via JS???
You need a timeout function to execute after 10 seconds (10000ms)
You can reload the page with window.location.reload()
setTimeout(function () {
window.location.reload();
}, 10000);
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
This is my code where #my_tasks.php , #add_new_task.php , #add_new_lead.php , #follow_up.php are my ID selector (for li element)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('<?php echo $v; ?>').hide();
});
</script>
where $v=#my_tasks.php , #add_new_task.php , #add_new_lead.php , #follow_up.php as string
It's not working (not hiding).please help me
<script type="text/javascript">
$(document).ready(function(){
$('<?php echo str_replace(".","//.",$v); ?>').hide();
});
</script>
You need to have escaping character before period (.).
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('<?= str_replace(".","//.",$v); ?>').hide();
});
</script>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
I have spent far too much trying to get a simple jquery and input box example to work.
When someone finishes typing something into the input box, I want jquery to popup an alert. Eventually I will be doing some more code with this but right now I just want to get this working!
Here is my example, which doesn't seem to work:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('#selector').change(function () {
alert($('#selector').val());
});
</script>
</head>
<body>
<input type="text" id="selector">
</body>
</html>
Any ideas?
Wrap your jquery inside document.ready() as shown :
<script type="text/javascript">
$(document).ready(function(){
$('#selector').change(function () {
alert($('#selector').val());
});
});
</script>
Read More here about document.ready().
EDIT :- If you want to alert on 'someone finishes typing(as given in your question)' then use .focusout() event as shown :
<script type="text/javascript">
$(document).ready(function(){
$('#selector').focusout(function () {
alert($('#selector').val());
});
});
</script>
DEMO
Add Document ready.
$(function(){
$('#selector').change(function () {
alert($('#selector').val());
});
});
</script>
You must use .focusout
$('#selector').focusout(function () {
alert($('#selector').val());
});
working example http://jsfiddle.net/2w7gyjgy/
You need to put your code in a document ready handler -
<script type="text/javascript">
$(document).ready(function() {
$('#selector').change(function () {
alert($('#selector').val());
});
});
</script>
Use Document.ready in your script yo bootstrap on page
$(document).ready(function(){// apply this
$('#selector').change(function () {
alert($('#selector').val());
});
});
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
When I get on one of my pages I want an lightbox to be loaded. I cant figure out how to make it happen.
Part of the jQuery:
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="jss/jquery.js"></script>
<script src='http://fliphtml5.com/plugin/LightBox/js/fliphtml5-light-box-api-min.js'></script>
<script>
$(document).ready(function() {
$(".foo").trigger('click');
});
</script>
</head>
The image/link that should be clicked automaticly:
<img class="foo" src="imgs/logo-growpact.png"data-rel='fh5-light-box-demo' data-href='http://online.fliphtml5.com/classified' data-width='1280' data-height='720' data-title='Rootcage'>
First Just remove your
<script type="text/javascript" src="jss/jquery.js"></script>
And try this :
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src='http://fliphtml5.com/plugin/LightBox/js/fliphtml5-light-box-api-min.js'></script>
</head>
<body>
<script>
jQuery(function(){
jQuery('.foo').click();
});
</script>
<img class="foo" src="imgs/logo-growpact.png" data-rel='fh5-light-box-demo' data-href='http://online.fliphtml5.com/classified' data-width='1280' data-height='720' data-title='Rootcage'>
</body>
</html>
Here is the Fiddle: CHECK THIS
UPDATED
<script>
jQuery(function(){
setTimeout(function(){
jQuery('.foo').click();
},400);
});
</script>
FIDDLE
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I have a javascrip[t function that is saved in a file (test.js). I want to call the function from within the body of the html file
something like
<script>
load drawLogo("text" val1, val2, val3);
</script>
(since this function will be called on different pages with different values)
Right now I am having to put that call at the bottom of the main function drawLogo() which means I can't customize it.
<script src="text.js" type="text/javascript"></script>
if it is in same function then make it like:-
onclick="func()" or onmmousehover="func()"
define function func() in the same file within script tag
Just put the function name and the parameters that receive this, dont forget first call the js file:
test.js:
function drawLogo(paramText,value1,value2,value3){
//Do something
}
html:
<head>
<script src="test.js" type="text/javascript"></script>
<!--you can put this in the head or in the body-->
<script>
drawLogo("some","value","for","example");
</script>
</head>
<body>
<!--you can put this in the head or in the body-->
<script>
drawLogo("some","value","for","example");
</script>
</body>