I am trying to get some jquery to click on a div.
I've got the ID of the div that I need to be clicked and it's inside some php code:
if(isset($_GET['something'])) {
echo "<script> $('#huge_it_dots_3_20').click(); </script>";
}
The div I'm targetting looks like this:
<div id="huge_it_dots_3_20" class="huge_it_slideshow_dots_20 huge_it_slideshow_dots_deactive_20" image_key="3" image_id="33" onclick="huge_it_change_image_20(parseInt(jQuery('#huge_it_current_image_key_20').val()), '3', data_20,false,true);return false;"></div>
My issue is that for some reason it's not clicking on the div.
And ideas why?
Try with this:
echo "<script> $('#huge_it_dots_3_20').trigger('click'); </script>";
warp the code with dom ready function.. then it should work
if(isset($_GET['something'])) {
echo "<script> $(document).ready(function(){$('#huge_it_dots_3_20').click();}) </script>";
}
Do something like
<?php if(isset($_GET['something'])) { ?>
<script>
$('#huge_it_dots_3_20').click();
</script>
<?php } ?>
The JS code will run before your DOM will be ready so.. here's a readyState.
<?php if(isset($_GET['something'])) { ?>
<script type="text/javascript">
$(function(){
$("#huge_it_dots_3_20").click()
});
</script>
<?php } ?>
Related
I would like to open a window with a 5 second delay when a button is clicked. I'm trying:
<script type="text/javascript">
function sample() {
setTimeout(function() {
window.open('<?php echo esc_attr(wpcoupon_coupon()->get_go_out_url()); ?>', '_self');
}, 5000);
}
</script>
which I call in the onclick attribute of the <button>:
<button class="ui right labeled icon button btn btn_secondary" onClick="sample();">
<i class="copy icon"></i>
<span><?php esc_html_e('Copy', 'wp-coupon'); ?></span>
</button>
The problem is that <?php echo esc_attr(wpcoupon_coupon()->get_go_out_url()); ?> doesn't return the correct value, and correct URL doesn't open.
What could be going wrong?
You need ajax to read that php variable asynchronously from javascript. Otherwise i think your question is better answered here:
Get variable from PHP file using JQuery/AJAX
Is the page address correct?
esc_attr(wpcoupon_coupon()->get_go_out_url())
For test your script in php file use construction:
<?php
//php code
?>
<script>
function sample() {
setTimeout(function() {
window.open('<?php echo('https://google.com'); ?>', '_self');
}, 5000);
}
</script>
<button class="ui right labeled icon button btn btn_secondary" onClick="sample();">test</button>
<?php
//php code
?>
I am trying to make a login form, when you log in then the Login in button disappears and gets replaced with a My account button.
So far i have made it that when you login the login hides however i need to show a different div when logged in.
This is so far what i have :
<?php
if (!isset($_SESSION['user'])) {
?>
<script>
jQuery(function ($) {
$('#pre_header_content_right').remove();
});
</script>
<?php
} else {
?>
<script>
</script>
<?php
}
?>
I am looking for a piece of code similar to this however instead or removes a div it shows it.
jQuery(function ($) {
$('#pre_header_content_right').remove();
});
I have dried .show instead of .remove however this does not work
Thanks for any help
you can try this
<script>
<?php
if (!isset($_SESSION['user'])) {
?>
$(document).ready(function(){
$('#button_login').show();
$('#button_my_account').hide();
});
<?php
} else {
?>
$(document).ready(function(){
$('#button_login').hide();
$('#button_my_account').show();
});
<?php
}
?>
</script>
I'm having problem with a div which has a button on it.Button has id='delsts' and that whole div is fetched from php like below code:-
//php code
foreach ($data as $row) {
$status = $row['status'];
$fn = $row['firstname'];
$time =$row['posted_dt'];
echo "<div id='stsshown'>
<div class='upropic'></div>
<span class='uname'><a href='#'>".ucfirst($fn)."</a></span>
<span class='postdt'>".$time."</span><form action='#'><input type='button' value='x' id='delsts' title='remove from timeline' name='delsts'></form>
<div id='detailbox'>
asdasd
</div>
<div class='stsbox'>".$status."</div></div>";
}
And this below jquery function is directly added from html(not php)
//Jquery code
<script type="text/javascript">
$(document).ready(function(){
$(document).on('click','#delsts',function(){
$('#detailbox').slideToggle('fast');
});
</script>
Now, according to my php code I have fetched some data first so, everything is fine there I get some five div on my webpage (as I have five data on database related to that div).Now secondly jquery code is handling onclick event function on id 'delsts' of those five div.Now the main problem is that when I click those button of any five div my jquery function works for only first div out of other div why?how can we make every div work same jquery onclick event function individually?
Do not use id with the same value for multiple elements. Use a class selector instead for all elements.
Example HTML:
<div class='stsshown'>
<div class='upropic'></div>
<span class='uname'><a href='#'>username</a></span>
<span class='postdt'></span><form action='#'><input type='button' value='x' class='delsts' title='remove from timeline' name='delsts'></form>
<div class='detailbox' style="display:block;">
test
</div>
<div class='stsbox'></div>
</div>
JS:
$(document).ready(function(){
$('.delsts').on('click', function(){
$(this).closest('.stsshown').find('.detailbox').slideToggle('fast');
});
});
This example is usable for generation of multiple sets of elements you want to achieve.
There can be only 1 id element with the same name in the document, but you generate more of them in loop.
Use classes instead of IDs, or assign unique IDs for each item.
change your jquery code to:
<script type="text/javascript">
$(document).ready(function(){
$(".delsts").click(function(){
$(this).next(".detailbox").slideToggle('fast');
});
});
</script>
and php:
foreach ($data as $row) {
$status = $row['status'];
$fn = $row['firstname'];
$time =$row['posted_dt'];
echo "<div class='stsshown'>
<div class='upropic'></div>
<span class='uname'><a href='#'>".ucfirst($fn)."</a></span>
<span class='postdt'>".$time."</span><form action='#'><input type='button' value='x' class='delsts' title='remove from timeline' name='delsts'></form>
<div class='detailbox'>
asdasd
</div>
<div class='stsbox'>".$status."</div></div>";
}
I have this code in my theme:
<script type="text/javascript">
(function($){
$(document).ready(function(){
var testimonials = $(".single-testimonial_<?php echo $ID; ? >").find('ul').children().length;
$(".single-testimonial_<?php echo $ID; ?>").jCarouselLite({
btnNext: ".gon_<?php echo $ID; ?>",
btnPrev: ".pon_<?php echo $ID; ?>",
auto:3100,
visible: testimonials
});
});
})(jQuery);
</script>
PHP FILE:
http://codetidy.com/8399/
What should I add, to make it stop the animation on hover. I'm not into jQuery, so please, write the exact code if you know it.
Thanks!
Solved by using custom jCarouselLite.
Stop the jcarousel Lite animation on mouseover?.
I found it after 3h of research.
I am having this problem when I have a for loop of links and I want each link to alert through jquery but only the first link is working.. What could be the problem?
<link rel='stylesheet' href='CSS/nook.css' type='text/css' media='screen, projection' />
<script type="text/javascript" src="JS/jquery-1.10.2.min.js"></script>
This is my script
<script>
$(document).ready(function() {
$("#click").click(function(e)
{
e.preventDefault();
alert("hi");
});
})
</script>
And this is my loop
<?php
for($i=0;$i<2;$i++){
echo "<a href = '' id = 'click'>a</a><br>";
}
?>
ID of an element must be unique, use class to group similar elements
<?php
for($i=0;$i<2;$i++){
echo "<a href = '' class='click'>a</a><br>";
}
?>
then
<script>
$(document).ready(function() {
$(".click").click(function(e)
{
e.preventDefault();
alert("hi");
});
})
</script>
When you use id-selector, it will return only the first element with the given id others will be ignored. So in your case the click handler will be registered to only the first element withe the id click
IDs are unique, and you should only have 1 per page. So this is wrong:
<a id="unique"></a>
<a id="unique"></a>
Instead, you need to use a class:
<a class="not_unique"></a>
<a class="not_unique"></a>
The way you access a class with jquery is with . instead of #:
$(".click")