Just a quick one, hopefully. I've coded up this:
<script>
$("div.design-project").css('display', 'none');
function InsertContent(tid) {
if(document.getElementById(tid).style.display == "none") {
document.getElementById(tid).style.display = "block";
}
else {
document.getElementById(tid).style.display = "none";
}
}
</script>
Which, if a link has the href:
href="javascript:InsertContent('design-project-1');"
it displays that div below. And if you click it again it disappears. Then if you click another link that say has the href:
href="javascript:InsertContent('design-project-2');"
it'll display that div and so forth.
However, if you have one div open, and click on another anchor link to open another div, it doesn't close the one already open.
Any ideas? Also, if there's a better way to do this then please let me know.
Thanks,
R
Here is the HTML as requested:
<a class="design-projects-slides-title" href="javascript:insertDesignProjectContent('design-project-1');">Title of project</a>
<!-- start of .design-project --><div class="design-project" id="design-project-1">
<div class="grid_6"><div class="project-info-area">
<h2>Title of project</h2>
<p>A rural retreat in the city. Built almost entirely from reclaimed element this little new-build timber cabin provides guest accommodation.<p>
<p>By coincidence a former chapel partition was found that matched the dimensions required. Used in their original painted condition, these doors became the front elevation and concertina open to one side - perfect for warm summer days. Further reclaimed elements include a bespoke curtain made from found patchwork, Victorian conservatory grills fitted over modern french heaters and industrial lights, taps, wash basin and an exposed shower fitting. Salvaged hardwood strip flooring and our Heathrow Terminal 2 stone fold from the floor to the walls. A thorough use of salvage all round!</p>
</div></div>
<div class="grid_6 project-info-images"><img src="http://placehold.it/460x540"></div>
<div class="grid_6 project-info-images"><img src="http://placehold.it/460x540"></div>
<div class="grid_6 project-info-images"><img src="http://placehold.it/460x540"></div>
<div class="grid_12 project-info-images"><img src="http://placehold.it/940x540"></div>
<div class="grid_6 project-info-images"><img src="http://placehold.it/460x540"></div>
<div class="grid_6 project-info-images"><img src="http://placehold.it/460x540"></div>
</div><!-- end of .design-project -->
UPDATE
In the end, I used a combination of your answers - thanks!
<!-- Reveal/hide sections on design projects/joinery -->
<script>
/* This is for the 'choose a project' reveal/hide */
$("div.slider-content").css('display', 'block');
$(".design-projects-slides-title").click(function() {
$(".slider-content").hide();
});
/* This is for reveal/hide on the product content */
$(".design-project").hide()
$('.design-projects-slides-title').click(function(){
var id = $(this).attr('id')
var content_id = id+"-content"
$('#'+content_id).slideDown('slow')
});
$(".slider-trigger").click(function() {
$(".design-project").hide();
});
</script>
First of all i see that you use jQuery so why not use it to achieve the entire flow?
You could do something like:
$(".mydivclass").click(function(){
$(".mydivclass").hide();
$(this).show();
})
Use jQuery toggle to achieve what you are trying to do. e.g.
function InsertContent(tid) {
$('#'+tid).toggle()
}
Another improvement you should do is that instead of hardcoding the id in each href, just add a class to element, override onclick of element and toggle related content. To get related content you can use a nomenclature e.g. if you use id='myid' for anchor, use id="myid_content" for content, so in click function you can toggle content e.g.
HTML:
<a class="content-link" id="myid">click me</a>
<div id="myid_content">
Here is the content
</div>
JavaScript:
$('.content-link').click(function(){
var id = $(this).attr('id')
var content_id = id+"_content"
$('#'+content_id).toggle()
}
Here is a working sample on jsFiddle
Better still is to keep clickable link and content inside a div, so that you don't need to set id, just set some classes and with parent and child relations you can get what is content e.g.
HTML
<div class="content-wrap">
<a class="content-link" >Click Me</a><br/>
<div class="content">
Here is the content for click me
</div>
</div>
JavaScript:
$('.content-link').click(function(){
var id = $(this).parent().find(".content).toggle()
})
See it in action here
HTML
<a id="id1" href="#" rel="divContent1" >First</a><br/>
<a id="id2" href="#" rel="divContent2">Second</a><br/>
<div id="divContent1" class="content">
Content of Div 1
</div>
<div id="divContent2" class="content">
Content of Div2
</div>
Javascript
$(function(){
$(".content").hide();
$("a").click(function(e){
e.preventDefault()
var divToShowId=$(this).attr("rel");
$(".content").hide();
$("#"+divToShowId).show();
});
})
I used the id of Content divs as the rel attribute value of links as we need some way to connect a link with its content.
Here is the working demo : http://jsfiddle.net/Kx9Ma/5/
Related
I wanted to create a modal of sorts to open when a <li> offering additional information about a topic is clicked. I created a popUpTrigger that responds to a user "click" and then gathers the provided section (and all tags nested inside) and moves it to the popUp div that then appears on the page. I've taken necessary precaution in case the section is empty in which an alert will sound. However, the alert still fires when a section is not empty (it has text and contains an additional anchor tag). I'm not sure why this is happening.
When I console log, I see the nested anchor tag is being viewed by the browser as a separate entity to the section. I've tried nesting the anchor tag further within a div element and rewriting the javascript so the html of the nested anchor tag will be evaluated accordingly as part of the section but all to no avail. This backfiring only occurs when an additional anchor tag is included in the section element of the HTML.
HTML
<li id="card">
<a class="popUpTrigger" href="#">
Get a Library Card
<section class="hide">
<h6> How to Obtain a Library Card:</h6>
<p> Additional Info </p>
<p> Additional Info </p>
<p> Additional Info </p>
<p> Additional Info </p>
<a href="https://docs.wixstatic.com/ugd/858998_1fae2b5d06fa41a3ba3fcb493b349d19.pdf">
<img src="imgs/LibraryCardVector.png" alt="library card">
</a>
</section>
</a>
</li>
<div class="popUp">
<div>
<div id="popUpClose"> <button type="button" class="btn">X</button></div>
</div>
<div id="moreInfo">
<!--WILL BE FILLED IN WITH <section class="hide"> DATA ABOVE-->
</div>
</div>
JavaScript
$('a.popUpTrigger').on('click', function() {
$(this).addClass('selected');
if ($('.selected')) {
let messageArea = $('.selected > section.hide');
let strippedMessage = messageArea.text().replace(/(\r\n|\n|\r)/gm, "").replace(/\s/g, "");
let fullMessage = messageArea.html();
if (strippedMessage === "") {
alert("Sorry that page isn't available right now.");
$(this).removeClass('selected');
} else {
$('.popUp').css('display', 'block');
$('.popUp #moreInfo').html(fullMessage);
}
}
$('.popUp #popUpClose').on('click', function() {
$('.popUpTrigger').removeClass('selected');
$('.popUp').css('display', 'none');
});
});
I removed the children from your anchor, and instead used NEXT. Also your if statement was not needed. I left .selected in the code just in case you wanted to style the anchor when clicked.
$('a.popUpTrigger').on('click', function() {
$('a.popUpTrigger').removeClass("selected");
$(this).addClass('selected');
let messageArea = $(this).next("section");
let strippedMessage = messageArea.text().replace(/(\r\n|\n|\r)/gm, "").replace(/\s/g, "");
let fullMessage = messageArea.html();
if (strippedMessage === "") {
alert("Sorry that page isn't available right now.");
$(this).removeClass('selected');
} else {
$('.popUp').css('display', 'block');
$('.popUp #moreInfo').html(fullMessage);
}
$('.popUp #popUpClose').on('click', function() {
$('.popUpTrigger').removeClass('selected');
$('.popUp').css('display', 'none');
});
});
.selected{color:red;}
.hide{display:none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li id="card">
<a class="popUpTrigger" href="#">
Get a Library Card </a>
<section class="hide">
<h6> How to Obtain a Library Card:</h6>
<p> Additional Info </p>
<p> Additional Info </p>
<p> Additional Info </p>
<p> Additional Info </p>
<a href="https://docs.wixstatic.com/ugd/858998_1fae2b5d06fa41a3ba3fcb493b349d19.pdf">
<img src="imgs/LibraryCardVector.png" alt="library card">
</a>
</section>
</li>
<div class="popUp">
<div>
<div id="popUpClose"> <button type="button" class="btn">X</button></div>
</div>
<div id="moreInfo">
<!--WILL BE FILLED IN WITH <section class="hide"> DATA ABOVE-->
</div>
</div>
You have the following code
<a href="#">
</a>
It is not valid to have nested anchors in HTML. So the browser breaks it up when it renders. That is why you are seeing it act weird.
You will need to stick the pop up code outside of the element.
<a class="popUpTrigger" href="#">
Get a Library Card
</a>
<section class="hide">
<p>Foo</p>
Bar
</section>
and reference it with next()
$(".popUpTrigger").on("click", function (e) {
e.preventDefault();
var anchor = $(this);
anchor.next('section').toggleClass("hide");
});
From a web analyst perspective on any given website i am looking find out which same page anchors are clicked the most by console logging the anchor's text value (inner html text) in the console for now.
The approach i took was to take the current page url after every anchor click and check to see if their had been any hash changes at the end of the url string and if so print that anchor's text value in the console.
var anchor = $("a[href^=\\#]");
anchor.on("click", function(){
if("onhashchange" in window) {
var anchorText = this.text;
console.log(anchorText);
}
});
I'm having issues with the code I wrote because its returning the inner Html text for any anchors on the page(except the ones with external links) but I only want to track the ones that lead to a section on the same page.
Would the approach i took need to be revised to even begin with ?
Here is some of the html I am working with and different anchors I want to track and ones I don't.
<!-- Where the click on the anchor i want to target happens -->
<nav>
<h2 class="wb-inv">Promotions</h2>
<ul class="toc lst-spcd col-md-12">
<li class="col-md-4">
Anchor for section 1
</li>
</nav>
<!-- below is the section of the same page the anchors would point to -->
<div class="col-md-12 pull-left">
<h2 id="story1">Section 1 Title </h2>
<p>Random paragraph 1</p>
</div>
<!-- The html I'm working with contains a set of tabs that reveal information as you click them, the href attribute and the id are both in the anchor. This is an example of anchors I wouldn't want to track-->
<a tabindex="-1" id="details-panel1-lnk" role="tab" aria-selected="false" aria-controls="details-panel1" href="#details-panel1">
<h2 class="h5 mrgn-tp-sm mrgn-bttm-sm">Online</h2>
</a>
Anchors that navigates to element on page is logged.
$(document).ready(function() {
var anchor = $("a[href^=\\#]");
var url = $(window);
anchor.on("click", function(e){
if ( $('#' + $(this).text()).length ) {
console.log($(this).text());
}
});
})
.section {
height: 400px;
}
.section:nth-child(even) {
background: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section" id="one">
one
</div>
<div class="section" id="two">
two
</div>
<div class="section" id="three">
three
</div>
<div class="section" id="four">
four
</div>
var anchor = $("a[href^=\\#]").not("a[href=#shr-pg0]");
anchor.on("click", function(){
var anchorText = this.text;
$(window).one("hashchange",function() {
console.log(anchorText);
});
});
This question is a follow-up to this question:
How do I link to a heading and cause a click event to fire when the link is clicked in JavaScript?
Basically I am trying to link from the footer on any page (the footer is the same across all pages) and do two things: move to the appropriate location on the page and display a previously hidden (display: none;) paragraph (p).
Here is the issue:
In the link above there aren't any solutions provided that allow for the situation where you are NOT on the services page (the page where the discussed links go). In other words, if you are not on the Services page and you click on a link to the services page the js is called and every happens the way it is suppose to except the paragraph isn't expanded. If I click on one of the service footer links while on the services page everything works fine.
How do I get the p to be display: block; when I am not on the services page (the page where I am linking too)?
I tried window.location, but that didn't seem to work. I also tried some solutions I found online for delaying the js until the page loads, but those didn't work either.
Thanks in advance.
ps - I'd like to see if there is a javascript solution, so no jquery please.
markup:
<div id="service1" class="service">
<h2 class="page services" ><img class="img-bullet-services" src="websiteDot.png" alt="alt">service1</h2>
<p class="p-on-white service-desc p-hide" >
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</p>
</div>
</br>
<div id="service2" class="service">
<h2 class="page services"><img class="img-bullet-services" src="websiteDot.png" alt="alt">service2</h2>
<p class="p-on-white service-desc p-hide" >
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</p>
</div>
<div id="col4-footer" class="four-cols-footer four-cols">
<ul>
<li style="list-style: none;"><h3><a class="a-bold" href="Services.php">Services</a></h3></li>
<li>service1</li>
<li>service2</li>
</ul>
</div>
js:
var target, sericeDiv, pToDisplay
function toggle(link) {
target = link.getAttribute("data-toggle");
sericeDiv = document.getElementById(target)
pToDisplay = sericeDiv.getElementsByTagName('p')[0]
document.getElementById(target).className = "service-desc";
pToDisplay.className = "p-on-white service-desc"
}
css:
.p-hide{
display: none;
}
I didn't understood completly the question but you could set the href as# set a data-attribute, something like a data-href="your/location.html" and create a method and set it onclick=yourProcess() and when you need to redirect get the data-atribute if you want to delay something you could use setTimeout()
You should take a look for data-attrib ,timing events
I hope this helps...
See my comments below, but this solved it for me. I can click on the footer links that go to the services page whether I am on the services page or not.
Major credit goes to MikeVelazco. Without his comments I couldn't have gotten this far.
markup:
<div id="service1" class="service">
<h2 class="page services" ><img class="img-bullet-services" src="websiteDot.png" alt="alt">Financial Analysis, Enterprise Performance, &
Reporting</h2>
<p class="p-on-white service-desc p-hide" id="p-service1" >
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</p>
</div>
</br>
<div id="service2" class="service">
<h2 class="page services"><img class="img-bullet-services" src="websiteDot.png" alt="alt">Software, Systems, & Office Automation
Solutions</h2>
<p class="p-on-white service-desc p-hide" id="p-service2" >
xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</p>
</div>
<div id="col4-footer" class="four-cols-footer four-cols">
<ul>
<li style="list-style: none;"><h3><a class="a-bold" href="Services.php">Services</a></h3></li>
<li>Financial Analysis & Reporting</li>
</ul>
</div>
js:
// link from footer link to p in services that needs to be displayed when you are on the services page already
function toggle(link) {
var target, sericeDiv, pToDisplay;
target = link.getAttribute("data-toggle");
sericeDiv = document.getElementById(target)
pToDisplay = sericeDiv.getElementsByTagName('p')[0]
document.getElementById(target).className = "service-desc";
pToDisplay.className = "p-on-white service-desc"
}
//when a footer link is clicked that goes to a service on the service page
//this makes the p below the heading display
function openP(){
var theURL = document.URL;
var gotArray = theURL.split("#");
var pToDisplay = document.getElementById("p-" + gotArray[1]);
pToDisplay.className = "p-on-white service-desc";
}
window.onload = openP();
css:
.p-hide{
display: none;
}
Script:
$( ".title").mouseenter(function() {
var which = $(this).index();
$('.globalnav li').find('.dropdown').hide().eq(which).show();
}).mouseleave(function() {
var which = $(this).index();
$('.globalnav li').find('.dropdown').hide().eq(which).hide();
});
Navigation:
<ul class="globalnav">
<li>
<div class="title">Home</div>
<div class="dropdown">
<div class="navlinks">
<div class="linkstitle">Title</div>
<div class="navlink">Link1</div>
<div class="navlink">Link1</div>
</div>
</div>
</li>
...
The above code is what I am using right now which does not work in Chrome as intended *I need to hold my click down to view the div. I use mouseover, it does not work properly in IE and FF.
I am also having trouble showing the associated div of the title (on title hover, show specific div) due to the nature of the coding format itself (client given code). Right now, on hovering over a title, it shows the first li's content for "navlinks".
Here's a fiddle to show you
Thanks
Why are you using the index of the .title element, if the other LI's look like that, the which variable will always be 0, and it's not the way to target the right .dropdown ?
Try something more like this
$( ".title").on('mouseenter mouseleave', function(e) {
var dropdown = $(this).closest('li').find('.dropdown').toggle(e.type=='mouseenter');
$('.dropdown').not(dropdown).hide();
});
And if you want the dropdown to be visible while hovering it, place it inside the element that triggers the mouseleave
<li>
<div class="title">
Home
<div class="dropdown">
<div class="navlinks">
<div class="linkstitle">Title</div>
<div class="navlink">Link1</div>
<div class="navlink">Link1</div>
</div>
</div>
</div>
</li>
FIDDLE
I've created a simple menu setup whereby all info is on the same page - just most is hidden until that tab is selected. The filter JS I'm using works great for this but for some reason (in CHROME only), when the menu item is clicked (eg, Location, Help), the screen shoots up a few hundred pixels (displays the selected info just fine though). Strangely, this happens only when the page is refreshed and the item is clicked for the first time. After that, everything works great!
Below is the pertinent code but to see it in action, see test site
The JS I'm using for the filter is:
$(document).ready(function() {
$('#nav a').click(function() {
$('#nav a.current').removeClass('current');
$(this).addClass('current');
var filterVal = $(this).text().toLowerCase().replace(' ','');
$('#content div').each(function() {
if(!$(this).hasClass(filterVal)) {
$(this).hide().addClass('hidden');
} else {
$(this).show().removeClass('hidden');
}
});
return false;
});
});
with the HTML menu and info as:
<ul id=nav>
<li>Mission</li>
<li>Location</li>
<li>Help</li>
<li>Vendors</li>
</ul>
<div id=content>
<div class=mission>
<img src="./images/roosters.jpg">
<h2>The Mission</h2>
<p>...</p>
</div>
<div class=location>
<img src="./images/old_market.jpg">
<h2>Our Location</h2>
<p>...</p>
</div>
<div class=help>
<img src="./images/helpers.jpg">
<h2>Get Involved</h2>
<p>...</p>
</div>
<div class=vendors>
<img src="./images/artisans.jpg">
<h2>Our Vendors</h2>
<p>...</p>
</div>
</div>
It's the href="#" in your anchor tags, those are pointing to the top of the page. You probably want to add a preventDefault() to your click handler. Read all about it here.