I was just wondering how to fade out the page when clicked and open up another html page. Right now I have
<div class="menu-item color">
<a href="html/webmap.html">
<i class="fa fa-flask"></i>
<p>Webmap</p>
</a>
</div>
How can I make it so that when "Webmap" menu item is clicked, the page fades out and opens up my webmap.html page?
I know javascript is invovled, I just can't figure it out!
Thanks in advance!
Not a whole lot to explain :
$(function() {
$('.menu-item a').click(function() {
var destination = this.href;
$('body').fadeOut('slow', function() {
window.location = destination;
});
return false;
});
});
Related
I have this code:
<input id="ville" placeholder="Enter a city">
<ul class="suggestions">
<li data-vicopo="#ville">
<strong data-vicopo-code-postal></strong>
<span data-vicopo-ville></span>
</li>
</ul>
<script src="https://vicopo.selfbuild.fr/api.js"></script>
$(document).on('click', '.suggestions li', function () {
$('#ville').val(
$(this).find('[data-vicopo-code-postal]').text()
);
});
When I click on my chosen city, the list of suggested cities do not disapear. What easy fix can I do so that when clicking, the display of suggestions close or hide?
Thanks
Insert the below code to always show the suggestions list after you have hidden with .hide().
The user can click back into the input field and start typing which will then show the list again, or by clicking on it.
$('#ville').on('click keyup', function() {
$('.suggestions').show();
})
I have the following inline styles for a dropdown menu list. I do not know how to make it in to 'click' using jQuery.
<button class="btn btn-primary mw" data-toggle="dropdown"><span class="caret">Subject</span></button>
<div class="dropdown-menu">
<a class="dropdown-item Business" onclick="selectBusiness()"> Business</a>
<a class="dropdown-item ICT" onclick="selectICT()"> ICT</a>
<a class="dropdown-item Arts" onclick="selectArts()"> Arts</a>
</div>
More information:
I tried to do this following code for a button and it's working fine. But as I said I do not know how to make it work for a dropdown menu.
var btn = document.querySelector("button.selectAll");
btn.addEventListener("click", selectAll);
....
Your input would be greatly appreciated!
If you want to use jQuery, you can add listener to the classes of each <a> inside your dropdown.
$(".Business").on('click', function() {
//selectBusiness() or your code here
});
$(".Arts").on('click', function() {
//selectarts() or your code here
});
$(".ICT").on('click', function() {
//selectICT() or your code here
});
Another solution would be to add a single listener for all your dropdown-items and then checking the content of the selected one.
$(".dropdown-item").on('click', function() {
switch ($(this).text()) {
case "Business":
selectBusiness();
break;
}
});
I have a dropdown button with a list of things that are anchored to different parts of the page. This dropdown is only for mobile.
However the problem is, the dropdown would not close after I click on it. Is there anyway I can make it close on click? I've tried looking around but it wouldn't work on mine.
<div id="mobile-dropdown" class="nav2 w" data-spy="affix" data-offset-top="350">
<div class="container">
<div class="pull-left" style="margin-top:3px; margin-right:3px;">Jump to </div>
<div class="pull-left">
<div class="btn-group mob-fl">
<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Categories
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</div>
</div>
</div>
</div>
I also took a look at bootstrap's js itself and caught this line:
if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) {
// if mobile we use a backdrop because click events don't delegate
$('<div class="dropdown-backdrop"/>').insertAfter($(this)).on('click', clearMenus)
}
Is this be the reason why it won't close? Are there any workaround to make it work?
EDIT:
So with some help i got this script:
$('document').ready(function() {
$("a.dropdown-toggle").click(function(ev) {
$("a.dropdown-toggle").dropdown("toggle");
return false;
});
$("ul.dropdown-menu a").click(function(ev) {
$("a.dropdown-toggle").dropdown("toggle");
return false;
});
});
My javascript is pretty weak, how do i actually edit this to make it work only in my "mobile-dropdown" id div.
Alright so far I've updated my script to this:
$('document').ready(function() {
$("#subject_cat_mob .dropdown-toggle").click(function(ev) {
$("#subject_cat_mob .dropdown-toggle").dropdown("toggle");
return false;
});
$("#subject_cat_mob ul.dropdown-menu a").click(function(ev) {
$("#subject_cat_mob .dropdown-toggle").dropdown("toggle");
return false;
});
});
It works like how I want it to be. But the dropdown won't open again after the first time.
This should make it work for your HTML:
$('document').ready(function() {
$("#mobile-dropdown .dropdown-toggle").click(function() {
$(this).dropdown("toggle");
return false;
});
});
Update
Here's a working example including your smooth scroll functionality:
$(function() {
$('a[href*=#]:not([href=#])[href^="#"]:not([data-toggle])').click(function() {
$(this).dropdown("toggle"); // this is the important part!
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top-100
}, 1000);
return false;
}
}
});
});
Notice the third line? That's all it needs: $(this).dropdown("toggle");.
You can check out a working example on JSFiddle.
A good solution can be found here:
https://github.com/CWSpear/bootstrap-hover-dropdown
Add class="dropdown-toggle disabled"
It's better explained here Allow click on twitter bootstrap dropdown toggle link?
I'm trying to inject jQuery into a HTML page to create a popup window when I click a link on the page. I'm having trouble with the Selector and/or Syntax.
HTML
<a href="/leads/19365876/edit" class="hoverable edit">
<i class="icon-pencil">
</i>
</a>
Attempted Solution
jQuery(document).ready(function($) {
jQuery('a.hoverable.edit').live('click', function(){
newwindow=window.open($(this).attr('href'),'','height=200,width=150');
if (window.focus) {newwindow.focus()}
return false;
});
});
you forgot to give '_blank' name to your window:
window.open($(this).attr('href'),'_blank','height=200,width=150');
I'm a jQuery novice, I have the following jQuery written to show a div when a specific link on a map is shown:
<div id="locationmap">
<a class="linkhide" id="link1" href="#">Occupier 1</a>
<a class="linkhide" id="link2" href="#">Occupier 2</a>
<a class="linkhide" id="link3" href="#">Occupier 3</a>
</div>
<div id="mapdetail">
<div class="hideme" id="local1" style="display:none;">
<p>Some content one</p>
</div>
<div class="hideme" id="local2" style="display:none;">
<p>Some content two</p>
</div>
<div class="hideme" id="local3" style="display:none;">
<p>Some content three</p>
</div>
</div>
<script type='text/javascript'>//<![CDATA[
$("#link1").mouseover(function() { $("#local1").fadeIn(500); });
$("#link2").mouseover(function() { $("#local2").fadeIn(500); });
$("#link3").mouseover(function() { $("#local3").fadeIn(500); });
$(".linkhide").mouseout(function() { $(".hideme").css('display','none'); });
//]]>
</script>
However, as you can see the .fadeIn(500) is being repeated for each link. How would I make this a variable once and call it for each line? This would save me repeating the same piece of code 30 times or so for each link.
I have a JSfiddle here: http://jsfiddle.net/karlgoldstraw/4NRY7/
Thanks.
function mouseOver(localId) {
return function() { $("#local" + localId).fadeIn(500); }
}
$("#link1").mouseover(mouseOver(1));
you could use a data-attribute to make the connection between the links and the div simpler,,,
<a data-id="2"...
$('a.linkhide').mouseover(function() {
var el = '#local' + $(this).data('id');
$(el).fadeIn(500);
});
Because i don't see it yet i thought i would add my answer here. Though i realize that the above answers are perfectly viable my solution lets the link tell the function what the content to show is called. By adding a javascript function that will inspect the hash value of the link you can use that as a selector to do your fadein's. This would also give the benefit of degrading better as the hash link would still put the user on the correct content in the event javascript is disabled.
JavaScript
var fade = function(){
var contentSelector = this.hash;
$(contentSelector).fadeIn(500);
};
Then to declare the mouseovers:
$("#linkone").mouseover(fade);
$("#linktwo").mouseover(fade);
$("#linkthree").mouseover(fade);
$("#linkfour").mouseover(fade);
Or you could even do it like this:
$(".linkhide").mouseover(fade);
Then on the HTML
<a class="linkhide" id="linkone" href="#content1">Link 1</a>
<a class="linkhide" id="linktwo" href="#content2">Link 2</a>
<a class="linkhide" id="linkthree" href="#content3">Link 3</a>
<a class="linkhide" id="linkfour" href="#content4">Link 4</a>
etc...
JSFiddle - http://jsfiddle.net/4NRY7/11/
This is one way that doesn't involve changing the HTML. As you can probably tell, changing the id of the link could make this much more efficient.
$(".linkhide").mouseover(function() {
var linkDivMap = { 'one' : 1, 'two' : 2, 'three' : 3, 'four' : 4 };
var contentBox =$(this).attr('id').replace('link','');
$("#content" + linkDivMap[contentBox] ).fadeIn(500);
});
$(".linkhide").mouseout(function() { $(".hideme").css('display','none'); });
Replacement for your current script.
This allows you to use a single dynamic function, and a single jQuery.mouseover() call, for all .linkhide elements, to avoid the duplication of code that still results from #MikeThomsen's answer.
$( document ).ready( function () {
$( ".linkhide" ).mouseover( function ( event ) {
var item_id = this.id.match( /([0-9]+)$/ )[1];
$( "#local" + item_id ).fadeIn( 500 );
} );
$( ".linkhide" ).mouseout( function () {
$( ".hideme" ).css( 'display', 'none' );
} );
} );