i modify an hotel theme website on Wordpress, i added a button on the header part and want it to show a simplebooking form that i already have, i just need to know what i have to do to make it work any tutorial please or ideas? now 2 days and still looking for a method to get it done, still searching.
Thanks everyone,
<div class="col-md-7 alignright"><button class="apb-btn" style="margin-top:25px; border-radius:0px !important; background-color:#f3d339 !important;">CHECK AVAILABILITY</button>
$(document).ready(function(){
//you should add class name for link to not target all links with click event
$("a").click(function(){
$(".apb-btn").toggle();
});
});
If you have jquery library you can do this
https://jsfiddle.net/ak7tj4m7/2/
Related
I'm not a coder and would love some assistance.
I'm adding the following trigger class to my wordpress site. I want a specific button to trigger this popup I've designed in Convertflow. Problem is, I'm not at all sure how to add this trigger class to my divi button module
Screenshot of button module:
The trigger class is .cta-42808-trigger
Surely you cannot trigger a button using CSS: you need to use JS, i.e jQuery:
jQuery( ".cta-42808-trigger" ).click(function() {
alert( "Triggered!" );
//what you need to do goes here
});
Divi is problematic in general for coding stuff, maybe you need to find another approach to problem.
Good Day,
I am working through freecodecamp and am currently grappling with the quote generator problem. I have run into a bit of an issue with getting functionality for me scripting a change when clicking the button. Basically I have my own code which I'll post below, but also trying to simply copy and paste the code from them I am still unable to get functionality in my button.
I am sure it's an honest and easy mistake but hopefully that should make it all the easier to resolve :) Let me know if you have any questions and I genuinely appreciate it!
(please note I simply want to change the display message upon clicking the button)
<script>
$(document).ready(function(){
$("#getMessage").on("click", function(){
$(".message").html("New Message");
});
});
</script>
<div id="wrapper">
<button type="button" id = "getMessage" class = "btn btn- primary">Generate New Quote</button>
</div>
<div class= "text-center">
<div class = "message">
Sample
</div>
</div>
As the others have mentioned, you are most likely not adding jQuery, yet you are attempting to use it ($). To confirm this, check your console. It's probably filled with Uncaught ReferenceError: $ is not defined.
Assuming you're using CodePen as the challenege says in the objective, you can very quickly and easily include jQuery. To do so, just click the settings cog next to JS, use the Quick-add drop down, and select jQuery.
If you wish to include it manually (as you will most likely have to in future development) I recommend Drefetr's answer.
There do not appear to be any major issues with the code (with respect to the logic, the editor may have rendered your formatting a little nastily).
Can you confirm that you have included the jQuery libraries within the header of your HTML document? e.g.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
For more information: https://developers.google.com/speed/libraries/#jquery
I'm designing a particular page where wherever I click I want to go back to the homepage.
All of the page in enclosed in a section:
<section id="test-page-1" ui-sref="project.home">
</section>
The problem is that I have 3 particular buttons in this page and are not working as they should, instead they are also redirecting me to the Home page.
Z-index didn't solve the problem as from what I read it only works on a visual perspective rather than functionality. I'd really like it if I can still use the ui-sref="project.home" in the whole section as it is. Any ideas please ?
In the functions associated with you button clicks, stop the event propagation.
$scope.buttonFunctioanlity = function (e) {
e.stopPropagation();
};
<button ng-click="buttonFunctioanlity($event)">Click Me</button>
You know what ui-sref is right?
Changing your application state and redirecting to different url (Home in your case)
not really understood your problem, but remember you can add ng-click together with ui-sref to do some function before redirecting (might help your logic)
like
<section id="test-page-1"
ng-click="doSomething(someParams)"
ui-sref="project.home"></section>
and controller
$scope.doSomething = function(someParams) {
// bla-bla-blaaa
}
Using mootools.js 1.3.2 and mootools-more.js
As far as I can tell this is supposed to reveal the div and also hide the content and linkTab divs at the same time.
$('blogLink').addEvent('click', function(){
$('homeLink').removeClass('active');
$('linkTab').removeClass('active');
$('blogLink').addClass('active');
content.slideOut();
linkTab.slideOut();
blogLink.slideIn();
});
This is the HTML
Blog
<div id="blogContent">
content here
</div>
It all works properly and that's OK but in addition to this, I also want to be able to give people a URL like http://mysite.com/#blogLink and have that blogContent div opened. When I do that now, it takes me to the top of the page and the blogContent div is hidden.
How do I do achieve that? I did try adding the mootools-smoothscroll.js and using the method outlined here http://davidwalsh.name/smooth-scroll-mootools but that just broke the entire page - would not load properly.
I have zero experience with mootools and weak on Javascript so please excuse me if I take a while to 'get' what you're trying to explain.
Many thanks.
First, are you particularly attached to MooTools? If you're a JavaScript newbie, jQuery is probably easier to use and definitely has a larger support community. But I'll post a solution that should work in MooTools for now:
If I understand you correctly, what you want to achieve is the following:
The anonymous function you posted will run when "Blog" is clicked
The function will also run if someone visits the page with #blogLink in the URL.
That's not too difficult to achieve:
// Once the DOM has loaded - so that our elements are definitely available
window.addEvent('domready', function() {
// Check for #blogLink hashtag, and reveal blog
if(window.location.hash == 'blogLink') { revealBlog(); }
// Make sure blog is revealed when link is clicked
$('blogLink').addEvent('click', revealBlog);
});
function revealBlog() {
$('homeLink').removeClass('active');
$('linkTab').removeClass('active');
$('blogLink').addClass('active');
content.slideOut();
linkTab.slideOut();
blogLink.slideIn();
}
You could also change your link mark-up to:
Blog
To make sure they're always on the correct link when the blog is revealed.
How can show closeable in the top of the page like stackoverflow new answers.
im using asp.net
It's really pretty simple - there's a div, with a control in it (an anchor I imagine) with a click event bound to it which removes the parent item from the DOM. Something like this
<!-- html -->
<div id="warning"><a href="#" class='close'>[X]</a></div>
And then some event goodness:
$(document).ready(function() {
$('.close').bind('click', function(e) {
$(this).parent.remove();
});
});
and you're pretty much done. Add salt and CSS to taste.
Do you mean the notification bar? If so, there is a nice demo and code snippet here.
http://tympanus.net/codrops/2009/10/29/jbar-a-jquery-notification-plugin/
Stackoverflow uses Javascript with the JQuery library to create this.
Here are a few jQuery imlpementations of the effect you looking for:
Slide Toggle
Slide Down
Hide
Queue
You will have to build on these.