I have bought one WordPress theme which have Live Chat button in header. Its support link to open chat. But I have got java script to open button. I am learning php and does not know how can I run java script on button press WordPress.
I have code in wordpress header theme is like below
<?php }if( !empty( $king->cfg['topInfoLiveChat'] ) ){ ?>
<a href="<?php echo esc_attr( $king->cfg['topInfoLiveChat'] ); ?>" class="chat">
<i class="fa fa-comments-o"></i> <?php _e('Live Chat', 'arkahost' ); ?>
</a>
Zopim chat have given me script to run is like below.
$zopim.livechat.window.show();
They have given example to include like below
<img src="INSERT_IMG_SRC_HERE"/>
But if I use like above my design getting changed. Anyone can please help me how can I integrate this script in my above codes ?
Thanks
Did you learn some javascript and jQuery? You can run codes when an event happen. Like you have clicked a ahref element with .chat class.
<script>
jQuery("a.chat").on("click", function(e) {
e.preventDefault();
// Your code goes here. Example:
$zopim.livechat.window.show();
});
</script>
P/s: you should have a better selector like .header a.chat, or all ahref element have .chat class will show your Zopim windows when users clicked on it.
Remember use 'jQuery' instead of '$' in wordrpess.
If you would like to add the code in JS like:
$zopim.livechat.window.show();
and fire it on click event on your button, you need just to add the script (if you have jquery) to your file (with button):
<script type="text/javascript">
jQuery('a.chat').on('click', function(e) {
e.preventDefault();
$zopim.livechat.window.show();
});
</script>
or add it to the JS file, that included into your page:
jQuery('a.chat').on('click', function(e) {
e.preventDefault();
$zopim.livechat.window.show();
});
Where a.chat is the link ( tag) and .chat is the class name of your link, like in your example. You can add the parrent elements.
e.preventDefault() - default event for the link will not fire
Thanks
Related
I'm going to be totally honest. I have zero experience in wordpress php coding but I can do simple adjustments using the wordpress admin. Now I'm facing a problem. I used the feather lightbox js. I have a code below which shows the part of the footer.
<?php if ( is_front_page() ) : ?>
<script>
jQuery(document).ready(function() {
$.featherlight("#mylightbox");
//console.log("hi");
});
</script>
<?php endif; ?>
<?php wp_footer(); ?>
Open element in lightbox
<div id="mylightbox">This div will be opened in a lightbox</div>
</body>
With this the featherlightbo pops up when i clicked the anchor tag. But what i want to do is to have the feather lightbox to open it on page load. As you can see in my code there's a part there says if front_page which has also ready function. It returns an error
Uncaught TypeError: Cannot read property 'featherlight' of undefined
Please I need your help anyone.
Thanks.
<div id="mylightbox">Text to display in box</div>
For this popup use the script
$.featherlight($('#mylightbox'), {});
This will work
It seems like jQuery isn't defined using the $-sign, since jQuery.(document) works.
Change $.featherlight to jQuery.featherlight and it should work.
As you asked in your comment, you can initially hide the div by adding the css property: display: none on that div.
Okay, I have a problem:
I have this code that creates a button, but I need that same onClick event in my wordpress menu www.slingerbistro.dk (the top right corner - booking button).
I've read, that it requires to put in some coding in the header.
The booking code I've received is like this:
<!-- DinnerBooking Booking Box Start -->
<script type="text/javascript" src="http://js.i.dinnerbooking.eu/onlinebooking.js"></script>
<a onclick="return openDBWindow(this.href);" href="http://slingerbistro.b.dinnerbooking.com/onlinebooking/997/2" id="wd_booking_btn" title="Se ledig tid og book bord" class="btn_blue"><span>Se ledig tid og book bord</span></a>
<!-- DinnerBooking Booking Box End -->
And what I've done is trying to get that into my header.php in the theme. So far I've come up with this:
<script type="text/javascript" src="http://js.i.dinnerbooking.eu/onlinebooking.js">
jQuery(document).ready(function($) {
$("#menu-item-top-level-10").on("click", function(e){
e.preventDefault();
// dinnerbooking code here
return openDBWindow (this.href == "http://slingerbistro.b.dinnerbooking.com/onlinebooking/997/2")
});
}); </script>
Does anybody have the skills to look at my sorry excuse for a code and correct it? I'm not a programmer (obviously) and could really need your help.
The booking button has "#menu-item-top-level-9" so basically the code I'm trying to write should give the same effect with the drop-down-widget as the sample widget I posted on top.
Thank you <3
Try to replace your code to this:
<script type="text/javascript" src="http://js.i.dinnerbooking.eu/onlinebooking.js">
jQuery(document).ready(function ($) {
$("#menu-item-362").on("click", function (e) {
e.preventDefault();
// dinnerbooking code here
return openDBWindow ($(this).attr('href'));
});
});
</script>
First, there is no element with id: menu-item-top-level-10
Second, you do not want to change the href. You want to read it.
I'm attempting to stop some links on my site from working.
Here is my code:
Links:
<a href='http://mysite.home.com'>Home</a><br>
<a href='http://mysite.home.com/nextpage'>Next Page</a><br>
<a href='http://mysite.string.home.com'>Home 2</a><br>
<a href='http://mysite.string.home.com/otherpage'>Other Page</a>
Jquery:
<script>
$("a[href*='.string.']").click(function(e) {
e.preventDefault();
alert('You cannot use this link');
});
</script>
The goal is to stop the last two links (with href containing '.string.') from working and instead display the alert. However, this code isn't working and the links still work. What am I doing wrong?
The strange thing is the code works fine here: http://jsfiddle.net/TzUN3/364/
but not on my site. I have the script and links both in the <body> of my page, script after the links. Is this correct?
Thanks.
Forgot to add
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
to my page. Feel like an idiot.
Thank you all.
$(function() {
// Jquery is ready
// *= is contains
$("a[href*='.string.']").click(function(e) {
e.preventDefault();
alert('You cannot use this link');
});
});
I have several elements within a website that are linked to separate php posts. The site also has one popup div('it's a custom modal window').
The popup div has two sections, title and content.
When the elements are clicked, the popup window will appear. I want the associated php post title and content to appear in the popup div in its proper section.
NOTE: I have tried for a week to figure this out using, php, ajax/jquery, combinations. I have scoured google and stackoverflow and can't seem to find the missing link.
Below is my code structure.
FIRST: This is the closest I've got to a working model. The php post_title and post_content is added to the popup window in the appropriate place. But adding code for the next element overrides the first elements data.
HTML
<div class="hexagon">
<p class="verticalcenter center" data-toggle="popWindow" data-target="#popUp">
<!-- ATTACH LATEST POST TITLE -->
<?php $the_query = new WP_Query( 'cat=4' ); ?>
<?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
<?php the_title(); ?>
<?php endwhile;?>
</p>
</div>
<div class="hexagon">
<p class="verticalcenter center" data-toggle="popWindow" data-target="#popUp">
<!-- ATTACH LATEST POST TITLE -->
<?php $the_query = new WP_Query( 'cat=5' ); ?>
<?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
<?php the_title(); ?>
<?php endwhile;?>
</p>
</div>
JS
Note: The 'overlay' is a background with opacity that covers the main content to help focus on the 'popUp' div.
$(document).ready(function() {
...//other code pertaining to website operation
//Click on Hexagons && Launch Modal
$('.hexagon,.hexagonz,#mapToken,.mobileNav li').on('click', function() {
$('.overlay').removeClass('hidden');
$('#popUp')
.addClass('animated fadeInUp')
.css( {
'bottom': '25%'
} )
}); //end Modal Launch
...//other code pertaining to website operation
});// end $(document).ready
The popup window(Modal) html code is located in my footer.php file along with a single.php file containing duplicate popup window code.
IDEALLY: I'd like to accomplish this without resorting to using an (a href=''). This website has a splash page that loads in front of the main page on first load. When I have tried fix this using an (a href='') link, it triggers the splash page(not what I want).
Hope the structure and end goal are clear.
You should first create a PHP script to send each popup the correct info.
Then you could attach a $.post on click, to the button that triggers the popup open, with a 'data-contents' or something similar
Then do the post like this:
$(document).on('click', '.myPopupButton', function(e) {
e.preventDefault();
data = { content : $(this).attr('data-contents') };
$.post('yourScript.php', data, function(json) {
// Handle the data that comes from your script
// i.e. :
$('.myPopup .title').text(json['title']);
$('.myPopup .body').text(json['body']);
}
});
Your PHP should be expecting a value like content => xxx
So you could get it like this:
if ($_POST['content'] == 'xxx') {
}
else if ( /*etc..*/ ) {}
Now the content of the popup should change dinamically
Morning,
Im just wondering, is there a way to make the radio button do something onclick when javascript on that browser is disabled?
i currently have this code that works when javascript is on only.
$links.="<tr>
<td style='width:10%;vertical-align:top;' class='space'>
<a href='".$href_link."'>
<input id='radio_".$value[0]."' type='radio' name='single' onclick='alert(\"hello\")' />
</a>
</td>
<td style='width:90%;vertical-align:middle;' class='space'>
<a href='".$href_link."'>".$value[0]."</a>
</td>
</tr>";
and this is the redirect function:
<script type="text/javascript">
function redirect(loc)
{
window.location = loc;
}
</script>
No, you can only use <noscript></noscript> like: <noscript>Enable Javascript to view page properly!</noscript> to display a message to the front end user, that they need to enable javascript to view this page properly, and hide the content on the page using CSS, since <noscript> can be used in head and body.
See more info here: The noscript tag
javscript code work when its enable there is no way to work js code without javascript enable
But you can handle this case
Make a div in your html and set like below
<div id="enablejs" >please enable your javacsript</div>
and on load call this js script
$(document).ready(function(){
/* if js enable then it remove on document
load and rest of work run as previous
other wise a div show with message
that enable your Javascript */
$("#enablejs").remove();
});