I have the below which is supposed to change the div depending on the image link clicked.
I want the British content to show automatically on page load, then it gives the option to change the div to display different content (language) by clicking on the image of the flag.
This works in jsFiddle and CodePen but is not working on my site, even when using the exact same code. Whenever I click the Iranian logo it does not load the content.
Any tips?
$(document).ready(function() {
$('#wayfindermenu a').click(function(e) {
hideContentDivs();
var tmp_div = $(this).parent().index();
$('.maincontent div').eq(tmp_div).show();
});
function hideContentDivs() {
$('.maincontent div').each(function() {
$(this).hide();
});
}
hideContentDivs();
$('.maincontent div').eq(0).show();
});
$(function() {
$('#wayfindermenu li a').on('click', function() {
$(this).parent().addClass('active').siblings().removeClass('active');
});
});
https://jsfiddle.net/pxce3t31/
for some reason, the code $('.maincontent div').eq(1); is bringing back the image of your flag instead of your iran content.
(div class="image right" style="display: block;"><img src="https://www.herts.ac.uk/__data/assets/image/0008/24983/Iran.jpg" alt="Flag of Kuwait"></div>)
try this implementation instead - target the specific class of the content instead of using indexes:
use data tag attributes to link which flag link goes with which page id, then target that specific div content and show it.
and also, britain doesnt show as default in your page because you dont have $('.maincontent div').eq(0).show(); in your page code, but its in your fiddle. you can also target the specific britain div like i did below $('page1').show();
$(document).ready(function() {
hideContentDivs();
$('#page1').show();
$('#wayfindermenu a').click(function(e){
hideContentDivs();
var target = $(this).data('page'); // gets the data-page attribute
$('#' + target).show(); // shows the page
});
function hideContentDivs(){
$('.maincontent div').hide();
}
});
li {
display:inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="wayfindermenu">
<li id="link1" class="">
<a href="#!" data-page="page1">
<img src="https://www.herts.ac.uk/__data/assets/image/0005/104909/english.svg.png" alt="Britain flag logo" id="itemImg"/>
</a>
</li>
<li id="link2" class="active">
<a href="#!" data-page="page2">
<img src="https://www.herts.ac.uk/__data/assets/image/0020/104906/Flag_of_Iran.svg.png" alt="Iran flag logo" id="itemImg"/>
</a>
</li>
</ul>
<div class="maincontent">
<div id="page1">british content</div>
<div id="page2">iran content</div>
</div>
Related
I'm trying to get one of my links to dynamically show when an anchor href link gets clicked on.
The JavaScript code to show the cats link but it's not showing the cats link as follows:
$(".button").click(function() {
$("#cat").show();
});
ul > li > #cat {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>Dogs</li>
<li><a id="cat" href="javascript:void(0);">Cats</a></li>
</ul>
<p>Cool cats are stored here</p>
Press here to enable Cats
you'll need display:hidden as default CSS for #cat, then $("#cat").show() will have effect. If you want the button to toggle the show state then use $("#cat").toggle()
You can hide the link on page load by default using $("#cat").hide();in the $(document).ready(function(){}
Check the snippet. Hope this helps
$(document).ready(function(){
$("#cat").hide();
$(".button").click(function() {
$("#cat").show();
});
});
<ul>
<li>Dogs</li>
<li><a id="cat" href="javascript:void(0);">Cats</a></li>
</ul>
<p>Cool cats are stored here</p>
Press here to enable Cats
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Giving this a quick demo in codepen, the following code (and codepen example) would be how I'd set up what you're trying to do.
The HTML:
<ul>
<li>
<a href="dogs.html">
Dogs
</a>
</li>
<!-- you want to hide the LI, because if you hide the <a>, then
there will be an empty <li> that you'll need to deal with in
the layout of your page / screen reader users may end up
wondering why there is an empty list item
-->
<li id="cats_item" class="display-none">
<a href="cats.html">
Cats
</a>
</li>
</ul>
<p id="reveal_message">
Reveal a link to cats via the following button:
<!--
Use a button here since you're triggering an action
on the page, and not actually linking anywhere.
-->
<button type="button" id="reveal_button">
Reveal Cats
</button>
</p>
The CSS
/* this is all you need to hide any element */
.display-none {
display: none;
}
The jQuery
$('#reveal_button').on('click', function () {
// reveal the LI that contains the cats link
$('#cats_item').show();
/* hide the reveal message, since cats is shown,
this no longer has any usefulness (or change the message
and action to a 'toggle' to show/hide the cat link
*/
$('#reveal_message').hide();
/*
move keyboard focus to the cats link, otherwise
keyboard users would have to traverse back up the
DOM to get to the newly revealed link
*/
$('#cats_item a').focus();
});
Here is a codepen that reveals the cat link on button click:
http://codepen.io/scottohara/pen/VbYyGr
Try the following code
CSS
ul > li > #cat {
display: none;
}
JQUERY
$(".button").click(function() {
$("#cat").toggle();
});
Here is the working code: https://jsfiddle.net/u0ajrpw0/2/
Did you add the jQuery Cdn in the html file?
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
Or you can use this to hide as well.
$('#cat').hide();
Your code should work if isn't dynamically generated, if so you should use event delegation on() :
$("body").on("click", ".button", function() {
$("#cat").show();
});
NOTE: Make sure that your code is wrapped by ready function.
Hope this helps.
$(function(){
$(".button").click(function() {
$("#cat").show();
});
});
ul > li > #cat {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>Dogs</li>
<li><a id="cat" href="javascript:void(0);">Cats</a></li>
</ul>
<p>Cool cats are stored here</p>
Press here to enable Cats
I have a large area that I need to make clickable. Imagine I have a list of items:
<ul class="my-area">
<li>...</li>
<li>...</li>
</ul>
The items <li> have a lot of stuff inside including working links or links that trigger modal windows etc. As long as someone clicks on one of the links inside, it should do whatever it is designated to do - redirect, open modal window, etc. However, if the click was not on a link but just a <div>, <span> etc, then I need to redirect to a specific location.
I've tried this:
$("ul.my-area li:not(a)").click(function (event) {
location.href='SOME_LOCATION';
});
However, it's not working. I considered using .stopPropagation() as well but then the modal windows stop working so that's not an option. Any ideas?
edited: There is two posible solutions:First solution:event.stopPropagation() *(not an option for this specific question because of modals)*- this would look like:
$("ul.my-area li").on('click',function (event) {
//location.href='SOME_LOCATION';
});
$("ul.my-area li a").on('click',function(e){
e.stopPropagation();
});
Second solution: Since you have nested DIV, IMG... inside the anchors, here it is checking if clicked element is not an anchor or if it don't have any ancestor anchor, and inside you can change location.href/do some action:
$("ul.my-area li ").on('click', function(event) {
if (!((event.target.tagName == "A") || $(event.target).closest('a').length)) {
console.log("This is not an anchor");
//location.href='SOME_LOCATION';
}
else{ //it's an anchor }
});
Check the below snippet
$("ul.my-area li ").on('click', function(event) {
if (!((event.target.tagName == "A") || $(event.target).closest('a').length)) {
console.log("This is not an anchor");
//location.href='SOME_LOCATION';
}
else{ //it's an anchor }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="my-area">
<li>
<p>This is Paragraf This is Anchor
</p>
<div>This is DIV</div>
</li>
<li>
<p>This is another Paragraf</p>
<a href="#">
<div>This Div inside Anchor<span> This is span inside div inside the anchor</span>
</div>
<img src="" alt="Image part of the anchor">
</a>
<p>Some paragraf</p>
</li>
</ul>
i have this html and javascript for my menu button
THIS IS THE HTML
MENU
<div class="mobilenav">
<li>HOME</li>
<li>SERVICES</li>
<li>WORK</li>
<li>TALK</li>
</div>
ICON
<a href="javascript:void(0)" class="icon">
<div class="MENU">
<div class="menui top-menu"></div>
<div class="menui mid-menu"></div>
<div class="menui bottom-menu"></div>
</div>
</a>
AND JS
$(document).ready(function () {
$(".icon").click(function () {
$(".mobilenav").fadeToggle(500);
$(".top-menu").toggleClass("top-animate");
$(".mid-menu").toggleClass("mid-animate");
$(".bottom-menu").toggleClass("bottom-animate");
});
});
i changed the ".icon" for an "a" so the menu closes as soon as i picked any option, now anytime i clicked on the scroll down button, contact and any other tag button the menu opens, is there any way to stop this from happening?
$("a") selects all links on the page.
Instead you only want the select .icon + the links in the .mobilenav, so you need to do $(".icon, .mobilenav a").
Note that JQuery selectors work almost the same as CSS selectors.
$(document).ready(function () {
$(".icon, .mobilenav a").click(function () {
$(".mobilenav").fadeToggle(500);
$(".top-menu").toggleClass("top-animate");
$(".mid-menu").toggleClass("mid-animate");
$(".bottom-menu").toggleClass("bottom-animate");
});
});
here is the jsfiddle of what im trying to accomplish..
http://jsfiddle.net/#&togetherjs=08LnngLQ1M
im trying to make the content in an html file swap in and out. The java script file is set up to apply the slide function to my div. Please show me what I need to add to the javascript in order to allow the information to swap in and out as well as display appropriately.
first my javascript file then under is the index.html file. also displayed the css in the head in order to show how i am trying to hide the content.
please show me how to implement the javascript i am lacking and then make appropriate changes to my html and css if necessary.
$(document).ready(function() {
var hash = window.location.hash.substr(1);
var href = $('#navigationMenu li a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #content';
$('#content').load(toLoad)
}
});
$('#navigationMenu li a').click(function(){
var toLoad = $(this).attr('href')+' #content';
$('#content').hide('fast',loadContent);
$('#load').remove();
$('#wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#content').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#content').show('normal',hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
return false;
});
});
<style type="text/css">
#page1, #page2, #page3, #page4, #page5 {
display: none;
overflow:hidden;
}
</style>
</head>
<body>
<div id="top">
</div>
<!-- The navigation css is in styles.css -->
<div id="main">
<ul id="navigationMenu">
<li>
<a class="home" href="#home">
<span>Home</span>
</a>
</li>
<li>
<a class="about" href="#about">
<span>About</span>
</a>
</li>
<li>
<a class="services" href="#services">
<span>Services</span>
</a>
</li>
<li>
<a class="portfolio" href="#portfolio">
<span>Portfolio</span>
</a>
</li>
<li>
<a class="contact" href="#contact">
<span>Contact us</span>
</a>
</li>
</ul>
</div>
<!-- The css for the main area is in css.css-->
<!-- The wrapper and the content div control the jquery slide up effect -->
<div id="wrapper">
<div id="content">
<!-- The 5 pages content divs will display in this area -->
</div>
</div>
<!-- The actual content I want to switch in and out of the panel, this is hidden -->
<div id="page1" class="pages">
<p>1 Whole bunch of text 1</div>
<div id="page2" class="pages">
<p>2 Whole bunch of text 2</div>
<div id="page3" class="pages">
<p>3 Whole bunch of text 3</div>
<div id="page4" class="pages">
<p>4 Whole bunch of text 4</div>
<div id="page5" class="pages">
<p>5 Whole bunch of text 5</div>
I suggest that you change your html so that your "pages" have ids that actually correspond to the href of the associated menu items:
Home
...
<div id="home" class="pages"><p>1 Whole bunch of text 1</p></div>
Then you can implement your slide animation paging thing something like this:
$(document).ready(function() {
$("#navigationMenu a").click(function(e) {
e.preventDefault();
var item = this.href.split("#")[1];
$("#content").slideUp(function() {
$(this).empty()
.append($("#" + item).clone().show())
.slideDown();
});
});
});
Note that there is no need to use .load() because you have all of the content already on the page. You can just empty the container and then append a clone of the relevant content.
Demo: http://jsfiddle.net/FtS8u/1/
Or in my opinion a neater option would be to move all of the content into the #content div to start with, show the #home "page" by default, and then just hide and show the pages in place:
$(document).ready(function () {
$("#navigationMenu a").click(function (e) {
e.preventDefault();
var item = this.href.split("#")[1];
$(".pages:visible").slideUp(function () {
$("#" + item).slideDown();
});
});
$("#home").show();
});
Demo: http://jsfiddle.net/FtS8u/2/
And a last thing to consider: if you remove the .pages { display : none; } CSS and instead use jQuery to hide the pages by adding this to the start of your document ready:
$(".pages").hide();
Then you'll still get the same effect: http://jsfiddle.net/FtS8u/7/ - except that if the user happens to have JavaScript disabled the page will still work because then the default anchor navigation will jump down to the associated div: http://jsfiddle.net/FtS8u/8/
I have a tab control on my page with two tabs. When I click on the second tab, the page scrolls down to the tab control. I don't want to have any focus on the tab control and maintain the page where it was. I know it happens due to the href on the <li> but if I remove the href I don't see any data.
My html code is as below:
<div id="tabContainer" class="Container">
<ul class="maintabs">
<li>Description</li>
<li>Terms</li>
</ul>
<div class="tabDetails">
<div id="tabDescription" class="tabContents">
<div id="divDescription" runat="server"></div>
</div>
<div id="tabTerms" class="tabContents">
<div id="divterms" runat="server"></div>
</div>
</div>
</div>
Javascript:
<script type="text/javascript">
$(document).ready(function () {
$(".tabContents").hide();
$(".tabContents:first").show();
$("#tabContainer ul li a").click(function () {
var activeTab = $(this).attr("href");
$("#tabContainer ul li a").removeClass("active");
$(this).addClass("active");
$(".tabContents").hide();
$(activeTab).show();
});
});
</script>
You need to disable the default behavior of the link from occurring.
For your click action, accept the first argument, e (for event) and call JQuery's preventDefault function on it. This will stop the browser from following the link.
$("#tabContainer ul li a").click(function (e) {
// hey browser, don't handle this link--we'll take it from here
e.preventDefault();
// ...
});
You can call that anywhere in the function (e.g., at the end).