I have a navigation bar with many links. The problem is that I am not done with all the pages. Is there anyway that I can block my users from clicking on certain links and instead display a little message that notifies them that the content will be coming soon?
Edit: It did not allow me to include bootstrap within the tags--but if a solution includes bootstrap, I am comfortable with it.
Edit 2: I have some jQuery effects on the navigation bar, is there anyway to also disable these effects when the link is clicked?
Put a class to your links which are not ready. For i.e. inactive class. And then in jQuery you can simply do it like below:
$( ".inactive" ).click(function(event) {
alert("This page is coming soon!");
event.preventDefault();
});
You can also use alert for displaying message :
HTML
Link
Link Wroking
JS
$('a.inactive').click(function( event ) {
event.preventDefault();
var yesno = alert("Coming Soon");
});
Add class inactive for showing message. For the link which are working, don't add class inactive.
Here is a fiddle.
Simply, you can use href="#" and alert message onclick:
MenuName
Related
I've written a jQuery code that adds and removes css classes from the accordion based on some condition. It works fine the fist time it loads but when I click on any links on the page and go to another page from there, it doesn't work when I come back to the same page.
Is it jQuery or React?
Here's my jQuery code.
$(function(){
$(".accordion").on("click", ".accordion-header", function(e){
if(!$(this).hasClass("has-add-bg")){
$(".accordion-item").removeClass("add-bg");
$(".accordion-header").removeClass("has-add-bg");
$(this).addClass("has-add-bg");
$(this).parent().addClass("add-bg");
}else{
$(this).parent().removeClass("add-bg");
$(this).removeClass("has-add-bg");
$(".accordion-item").removeClass("add-bg");
}
})
})
I tried using state but the problem is I want to add or remove the class of only the accordion I've clicked on. Not sure how to achieve that result just with state so wrote jQuery.
Scenario: user profile. I would like to be able to display a user name with a popover that displays a limited amount of information from the user profile. So far, I have that part working. I can build it on the fly and have it do what I need. The popover works perfectly.
What I would also like to do is have the user be able to click on the user name and bring up a Bootstrap modal form with more information about the user (if provided). The first problem I am seeing is that it appears the data-toggle attribute can only have a single setting:
echo '' . $user_row['user_name'] . '';
In that example, if I add the modal to the data-toggle attribute it doesn't seem to do me much good.
I have discovered by tinkering (and that is why the class 'userprof' in the code above), that a JavaScript click event can be triggered (right now all I'm doing is a basic JS alert dialog to test), but from there I would want to load the modal. I am not sure if I can make it all work.
I have a set of functions I've used successfully for another modal (calling this one 'userModal') that I got some help from someone here a while back with -- is it possible to call that from the click event?
// code to open the modal with the caption and description:
$('#userModal').on('show.bs.modal', function (event)
{
var button = $(event.relatedTarget); // Button that triggered the modal
var title = button.data('title'); // Extract info from data-* attributes
var body = button.data('body'); // Extract info from data-* attributes
var modal = $(this);
modal.find('.modal-title').text( title );
modal.find('.modal-body').append( body );
});
// when modal closes, clear out the body:
$('#userModal').on('hidden.bs.modal', function ()
{
$(this).find(".modal-body").text('');
});
Since these are "anonymous" functions I am not sure I can call them ... feeling a bit lost in the code here. Any help pointing me in the right direction would be great. I'd even be willing to consider a different idea, but I would like this kind of functionality (hover and click) for this situation and possibly something else. Thanks!
You're listening for the modal to show itself, when the DOM is showing the modal.
try using something like this, and use a button or a link with data-toggle="modal"
$(document).on('hidden.bs.modal', '#userModal', function ()
{
$(this).find(".modal-body").text('');
});
for reference https://jsfiddle.net/y063mu4t/1/
You can try:
$(document).on('click', 'a.userprof', function(){
$('#userModal').modal('show');
});
To make your callback function work, you need to add according data-* attribute to each of the <a> tag.
I am looking at having a alert style box show up when a user tries to leave the page but I what I wanted to do is have a share link in the alert style box
I have read this ticket javascript before leaving the page and now am unsure if this is possible.
I realise this will run
$(window).bind('beforeunload', function(){
alert("hi");
});
Now I know you cannot add links to an alert window so am trying to get round this another way but cant think of how i would display a alert/popup before going to another page that has a link in
Can anyone suggest anything - is there a plugin that might do this?
Its better you not do even if u do a hack as if you find a bug and use it to do it one they they will fix it and you will be again at same point. This is a security risk suppose i want to close a tab and in code you opne new popups or do malicious things???? So browserts dont allow it. If user wants to go they are allowed u can use standard
window.onbeforeunload = function() { return 'You have unsaved changes!'; }
if you like So try this. istead of custom things.
DEMO
You cannot add links to an alert window. What you could do is use a jQuery Plugin like http://jqueryui.com/dialog/#default and call it within beforeunload function.
HTML
<div id="dialog" title="My Link">
My Link
</div>
jQuery
$(window).bind('beforeunload', function(){
$( "#dialog" ).dialog();
});
OR if don't want to use jQuery you could use a window.open
eg: http://www.quirksmode.org/js/popup.html
I've seen the new website of megaupload (mega) and we've got this:
Ok, if I press on left-menu contacts, it only reloads the white part on the image, if I press messages, the same, it only reloads white part. But if I go from contacts to messages and I press browser's back button, it goes from messages to contact and only reloads white part as always.
In my website, I do the same using jquery hide and show, but obviously, if I press browser's back button it doesn't hide the div and shows the other one.
My web site is only one html file and there are 4 div that get shown or hidden depending on the button you press, this is an example:
$("#btn_contact").click(function () {
$("#content_contact").show();
$("#content_home").hide();
$("#content_products").hide();
$("#body_aux").hide() ;
$(this).addClass('visited');
$('#btn_products').removeClass('visited');
$('#btn_home').removeClass('visited');
});
Can anybody tell me how to find this with jquery or whatever I have to use.
I don't know if I've explained myself well, if not, ask me to do it better.
I would appreciate any help. Thanxs a lot.
Maybe it'd be easier for you and more appropiate to make "content_contact.html", "content_home.html", and so on and use .load() function as Ozan Deniz said. You wouldn't have to change margins, positions, etc. and back button would work withouth programming. I think is not appropiate to make the whole website using just one html file, showing and hiding div's, ofcourse you can do this but maybe is not the right way. I'm newbie at this, but that's what an expert told me beacuse I was doing something similar to that.
Hope to help you.
You can use jquery load function to load white part
For example;
$('#result').load('ajax/test.html');
And in back button event you can load the white part
jquery hide and show
window.onbeforeunload = function() { $('#result').hide(); }; or
window.onbeforeunload = function() { $('#result').show(); };
jquery load function
window.onbeforeunload = function() { $('#result').load('ajax/test.html'); };
Sometimes it makes sense to have a link within a fancybox to launch another fancybox (or load content within the current one).
Say, you have a fancybox error message on login. You also have a "email me my password" widget that works via a fancybox. You may want to combine the two to say (in a fancybox):
Bad password!
Forgot my password!
Unfortunately, this will not work. I considered adding the following js:
$('#fancybox-content a').live('click', function(){
$(this).fancybox();
});
Surprisingly, this sort of worked: You have to click on the link twice and then the right thing happens. Ugh.
Finally, I found a hacky ugly work-around (it works!):
$('#fancybox-content a').live('click', function(){
var href = $(this).attr('href'); //assume there is a selector inside href
$.fancybox($(href).html()); //find the html manually and load
});
What is the right way to accomplish this?
This is i how i solved this problem in my projects:
$('a.fancybox').live("click",function(event) {
event.preventDefault();
var href = $(this).attr('href');
$.fancybox({href: href})
});
In this way you can add fancybox to any current un future A elements with .fancybox class so you don't have to define new events after opening fancybox.
Version 2 is already using "live", so using class names - `$(".fancybox").fancybox();' - would also work on elements loaded using ajax
You should be telling elements to open a Fancybox from within your plugin.
Somewhere you have the following ->
$(document).ready(function(){
$("#my_element").fancybox();
});
That's a very basic function to open a Fancybox, and not only that, but it will also what to open based on the href of the element. You don't need to do any leg work here.
So if you have ->
Forgot my password!
Simply add an ID, such as 'x' for simplicity ->
<a id="x" href="#forgot-password">Forgot my password!</a>
Then, enable the Fancybox plugin for this element.
$(document).ready(function(){
$("#my_element").fancybox();
//this is for our new container to fire
$("#x").fancybox();
});
That should be all you need.