I have found some jQuery codes for show content with slide effect, but none of them works.
the Javasccript code:
$('#clickme').click(function() {
$('#pic').slideToggle('slow', function() {
});
});
the HTML:
<div id="clickme">
click here</div>
<img id="pic" src="Img/Gallery/123.jpg" />
When i click the "click me" div, nothing happens. I have also tried this :
$("div").click(function () {
$(this).hide("slide", { direction: "down" }, 1000);
});
But again, nothing happens. What is the problem?
Thanks!
There are two ways that it works:
1) Add the following code in the header
$(document).ready(function () {
$("div").click(function () {
$('#pic').slideToggle('slow', function() {
});
});
});
2) Place your code after your last div!
And obviously you have to include a jquery file!
For example:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
Put your code in
$(document).ready(function(){
// Your code here
});
you shlould load jQuery by adding this line at the head:
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
You may also want to change your code to this:
$("div").on("click", function () {
$(this).hide("slide", { direction: "down" }, 1000);
});
Check this jsfiddle to see the working example. ) Btw, it's not necessary to pass the empty function to slideToggle, I suppose.
I guess the only difference is that you try to run your javascript not as onload function; it doesn't find any 'clickme' elements, that's why event handler function is not called.
Related
I would like to ask you guys if I can shortcut this code as I think it can be more less code but I'm learning right now Javascript/Jquery.
Thanks!
<script type="text/javascript">
$(document).ready(
function(){
$(".facebook").click(function () {
$("#facebook_prices").show("slow")
$("#twitter_prices").hide("slow")
$("#youtube_prices").hide("slow");
});});
$(document).ready(
function(){
$(".twitter").click(function () {
$("#twitter_prices").show("slow")
$("#facebook_prices").hide("slow")
$("#youtube_prices").hide("slow");
});});
$(document).ready(
function(){
$(".youtube").click(function () {
$("#youtube_prices").show("slow")
$("#facebook_prices").hide("slow")
$("#twitter_prices").hide("slow");
});});
</script>
The first thing to do is to only use one document.ready handler. You don't need to repeat it for every operation.
The pattern you're looking to follow here is called 'Don't Repeat Yourself', or DRY. To achieve this you can apply common classes to the elements which trigger events and use the href (assuming the trigger is an a element) or data attributes to store custom metadata to separate the actions performed by each element. Try this:
$(document).ready(function() {
$(".trigger").click(function(e) {
e.preventDefault();
$('.price').hide('slow');
$($(this).attr('href')).show("slow")
});
});
.price {display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Facebook
Twitter
Youtube
<div class="price" id="facebook_prices">
Facebook prices...
</div>
<div class="price" id="twitter_prices">
Twitter prices...
</div>
<div class="price" id="youtube_prices">
Youtube prices...
</div>
You can use comma ( , ) to similar elements to hide()
Check below code :
$(document).ready(function () {
$(".facebook").click(function () {
$("#facebook_prices").show("slow");
$("#twitter_prices,#youtube_prices").hide("slow");
});
$(".twitter").click(function () {
$("#twitter_prices").show("slow");
$("#facebook_prices,#youtube_prices").hide("slow");
});
$(".youtube").click(function () {
$("#youtube_prices").show("slow");
$("#facebook_prices,#twitter_prices").hide("slow");
});
});
Check the below implementation. Removed the repetitive .ready() methods and merged the hide functions.
<script type="text/javascript">
function hideAll(){
$("#facebook_prices").hide("slow")
$("#twitter_prices").hide("slow")
$("#youtube_prices").hide("slow");
}
$(document).ready(
function(){
$(".facebook").click(function () {
hideAll();
$("#facebook_prices").show("slow");
});
$(".twitter").click(function () {
hideAll();
$("#twitter_prices").show("slow");
});
$(".youtube").click(function () {
hideAll();
$("#youtube_prices").show("slow");
});
});
</script>
Hope this helps :)
The scenario I want to achieve is as follow:
$("#parentDiv").on("load",'#childDiv', function () {
// do something...
});
I would like to call a function when a child div is dynamically generated and shown on the page, but there is no suitable event that can achieve this. Any hint or help would be appreciated.
Instead of load, you can make use of a custom event which gets triggered with .trigger():
$(document).ready(function() {
$("button").on("click", function() {
$("body").append("<div id='new'>Created</div>").trigger('custom-event');
});
});
$(document).on("custom-event", function() {
console.log('DIV created!');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<button>Create element</button>
</body>
I am trying to show span but it doesn't work. This is the code that doesn't work:
<script>
$(document).ready(function() {
$('input[type="file"]').ajaxfileupload({
'onStart': function() {
//alert("myAlert");
$(this).siblings('span').show();
}
});
});
</script>
But the span will show when I put alert before it, like this:
<script>
$(document).ready(function() {
$('input[type="file"]').ajaxfileupload({
'onStart': function() {
alert("myAlert");
$(this).siblings('span').show();
}
});
});
</script>
Why is this happening? (I use the plugin: jquery.ajaxfileupload)
Edit:
This is my html code:
<input type="file"/><br/>
<h1>test1</h1>
<span style="display: none;">test3</span>
<h2>test2</h2>
The problem is that your code runs before the DOM structure has finished loading. That causes your script to attempt to change the styles of the span before it has access to the span, so it doesn't do anything at all. To fix this, place your code within a callback, like this:
$(function() {
$('input[type="file"]').ajaxfileupload({
'onStart': function() {
$(this).siblings('span').show();
}
});
});
That will make the code run only after everything has loaded, which will ensure that your script can actually access the element it needs to show. When working with the DOM (which is basically everytime you need to change any HTML element), you need to put your code in such callback function.
Try a direct reference to the span
<input type="file"/><br/>
<button>View Span</button>
<h1>test1</h1>
<span class="myspan" style="display: none;">test3</span>
<h2>test2</h2>
Then
<script>
$(document).ready(function() {
$('input[type="file"]').ajaxfileupload({
'onStart': function() {
$('.myspan').show();
}
});
});
</script>
This must work
I'm trying to auto-click a button to initiate a function when the html page loads. I've tried document.getElementById('watchButton').click and it doesn't seem to work, the button is not clicked. Any suggestions?
<div class="content">
<div class="action-area ch30">
<button class="button dh" id="watchButton">Start Geolocation Watch</button>
<button class="button dh" id="refreshButton" >Refresh Geolocation</button>
</div>
The javascript:
run:function() {
var that = this;
document.getElementById("watchButton").addEventListener("click", function() {
that._handleWatch.apply(that, arguments);
}, false);
document.getElementById("refreshButton").addEventListener("click", function() {
that._handleRefresh.apply(that, arguments);
}, false);
},
Thanks!
I'd put it inside document.ready (so it doesn't fire until the DOM loads) and use jQuery syntax:
$(function() {
$('#watchButton').click();
});
http://jsfiddle.net/isherwood/kVJVe/
Here's the same fiddle using jQuery syntax: http://jsfiddle.net/isherwood/kVJVe/4
That said, why not just name your function and call it directly?
It would be click() not click
document.getElementById("watchButton").click();
You would need to call it onload or after the function has run
window.onload = function () {
document.getElementById("watchButton").click(); };
Try this ^^
try trigger
<script>
$(document).ready(function() {
$("#watchButton").trigger('click');
});
</script>
document.getElementById("studyOne").click();
$("#studyOne").trigger('click');
Put this in onload function. It worked for me.
I am trying to create a bit of jquery code to update an element but im having a problem. It wont update and I think its because of the element id?
Here is my JS Code:
<script type="text/javascript">
$(document).ready(function()
{
$("#vote_button_" + $(this).attr('id')).click(function()
{
$("div#vote_count").show().html('<h2>voting, please wait...</h2>');
});
});
</script>
And this is the HTML Code:
<div class="vote_container">
<div class="vote_button" id="vote_button_31"><img src="/images/picture_31.png"></div>
<div class="vote_count" id="vote_count">0</div>
</div>
You're telling it to use the ID of the document (I think).
You can surely just do:
$("#vote_button_31").click(function()
{
$("#vote_count").show().html('<h2>voting, please wait...</h2>');
});
If you want the code to work on all vote buttons try this:
$(".vote_button").click(function()
{
$(this).siblings('.vote_count').show().html('<h2>voting, please wait...</h2>');
});
$("#vote_button_" + $(this).attr('id')).click(function()...
The way you've called it, this has no context at all. Since you have a class on the div in question, why not use that instead?
$(".vote_button").click(function() {...
That will also work if you don't know the id in question when the page is loaded. If you're dynamically adding the divs then you might want to use live or delegate:
$(".vote_button").live("click", function() {...
Why you don't select the element directly:
<script type="text/javascript">
$(document).ready(function()
{
$("div#vote_button_31").click(function()
{
$("div#vote_count").show().html('<h2>voting, please wait...</h2>');
});
});
</script>
YOu cannot do this. Instead try this:
<script type="text/javascript">
$(document).ready(function()
{
$(".vote_button").click(function()
{
$("div#vote_count").show().html('<h2>voting, please wait...</h2>');
});
});