I'm not sure how to entitle my question correctly, but here is the problem:
I have a number of div elements on a page and trigger links pointing to each of those elements with anchor ids. Those elements will work as popups.
Show Popup #1
Show Popup #2
Show Popup #3
<div id="pop1" class="popup">...content here...</div>
<div id="pop2" class="popup">...content here...</div>
<div id="pop3" class="popup">...content here...</div>
Now what is the effecient way to associate multiple links to divs for toggling them on link click?
Coding them one by one is not a good option because there can be too many elemens on a page.
$("#t1").click(function(){
$("#pop1").toggle();
});
Since your triggers have a common class trigger, you can do:
$(".trigger").click(function(){
$(this.href).toggle(); // href is "#pop1", "#pop2", etc.
return false; // prevent default action of anchor tag click
});
You can add data-attribute (for example, data-div-id) to your link tags that will contain associated div's id:
Show Popup #1
And then you just trigger it like this:
$('a.trigger').click(function(){
$('div#' + $(this).data('divId')).toggle();
}
Related
Why my overlay 'p' (bg purple with yellow text) is showing only once after button clicked, even if I have toggle the function?
Have a look to my codepen to test the issue:
https://codepen.io/cat999/project/editor/AEeEdg
$('.animate-this').click(function() {
$('p').slideToggle("fast");
});
Easy way to fix this?
The .animate-this element gets hidden when the <p> is visible.
You can add the same functionality to the <p>, then it will work.
$('.animate-this, p').click(function() {
$('p').slideToggle("fast");
});
However, I would recommend not biding an event to a tag, but to a class.
So you can just add the class .animate-this to the <p> tag and it will work too, like this:
<p class="animate-this">If you click i need to show up again!</p>
I am currently working on this responsive gallery content and it is working the way I wanted it to. However, I needed to have one of the contents have a content change upon clicking a certain selection This is the working code of the content change. I added it on the main responsive gallery content after checking that it works ok on a separate file.
Is it due to my placing of the content changing script? I tried placing it inside the main script below but it didn't work. I tried creating its own script tag and placed it at the end but same result. Right now, I tried adding it inside the head tag and it still won't work. Can somebody please help me T^T
Kindly click the atkinsons menu since that is where I inserted the content change
Here is the script tag i'm referring to who is responsible for selecting the appropriate pages to change the content.
<!--Content Change Script-->
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function() {
var id = $(this).attr("data-id"); // Using a custom attribute.
$("#pages div").hide(); // gather all the div tags under the element with the id pages and hide them.
$(".div" + id).show(); // Show the div with the class of .divX where X is the number stored in the data-id of the object that was clicked.
});
});
</script>
PROBLEM Under the Atkinsons page, the content is not changing whenever i click the selection. under the first link, the outcome should look like this The title and Page should change whenever I click on the selection.
THE CHANGES I already applied the code advise from the 1st answer below. it is now changing the title upon clicking the selection, but not all section is clickable. I applied the same changes in both codepen and localhost but it produces different clickable links that doesn't work. The random letter not working depends on the size of the window. Also the paragraph is not showing
Your script is not working because your <a> is not in page when you are trying to bind events to them.
You need to do delegate which is something like this.
<script type="text/javascript">
$(document).ready(function() {
$(document).on("click", "a", function() {
var id = $(this).attr("data-id"); // Using a custom attribute.
$("#pages div").hide(); // gather all the div tags under the element with the id pages and hide them.
$(".div" + id).show(); // Show the div with the class of .divX where X is the number stored in the data-id of the object that was clicked.
});
});
</script>
This will bind event to document, which is in page from start.
More on jQuery api here.
I have the sitaution, that the primar topics in my menubar only contains instroductions, without any pictures. So I would prefer a solution, where by clicking on "about me" not a full site has to be loaded, though only the content of that one div changes, by fade out the first and fade in that one, which is the corresponding one, to the element clicked.
Has there someone a solution for me, because my try to use the LUKGt/5/ jsfiddle won't work, and there was all the time, every content showed.
Thx in before
You can use the .html([html content here[) method to replace the html content of a div. On button/menu item click trigger a function that gets the information you want to load and use .html to overwrite the content in the desired div.
JsFiddle: https://jsfiddle.net/fgazfLaz/1/
html
<div id="content">
Starting Content
</div>
<button type="button" id="changeContentBtn">Change div content</button>
Javascript
$("#changeContentBtn").click(function() {
$("#content").html("Ending Content");
})
I use Wordpress and I would like to have a plugin that allow me to open a box/popup content for "a href" call.
Something like this:
Text use it in a div tag
this is the code i use:
<div class="tracklist download-button2" style="display: initial-block">
<a href="#">
<span class="header-clip2">
<span class="header-triangle2"></span>
</span>
<span class="header-bg2"></span>
<div class="clear"></div>
<div class="file-icon-inner2">
<i class="icon-download2"></i>Tracklist
</div>
</div>
please check http://af-sound.ro "Tracklist" button
so whoever will click on Tracklist, i would like to have a box popup opened with the content inside.
There will be more "tracklist" buttons, so i dont need just a global popup box. I have tried with Anything popup but that doesn't work as it use a shortcode like: [anythingpupup=id1] which cannot be used in "a href" call
The first issue here is that you are missing the closing anchor tag
Secondly, you should give the box which you'd like to open an "id" attribute.
<div id="popup-box"></div>
Wherever you place your anchor tag, you can then reference the box using
Click to open popup
The "#" will refer to the id attribute of the matched element.
There is no need to install an entire Wordpress plugin. You can use something like Bootstrap Modals
The instructions are very straight forward to help you set it up.
I think you don't need a plugin for that. You could use just javascript to open such popup from an anchor. Here is an example code:
Open Popup!
<script language="javascript">
function Popup()
{
var win = window.open('', '',"toolbar=no, width=100, height=20");
var doc = win.document.open();
doc.write('<html><body> <b>Hello!</b> </body></html>');
doc.close();
}
</script>
As you can see, you can add any dynamic html as content of the popup, including the html that you want in the doc.write method.
Cheers!
There are a number of ways of achieving this, depending on the result you want to get.
Maybe the simplest way is not using a plugin at all; just add a hidden div with the content of the popup in it. And then, from jQuery, capture the click of your tag a and show up that hidden div. From CSS you can style that div in any way you need.
If you want to use a plugin, you could use Fancybox or any other similar, given the fact that you already have jQuery on your website.
I know the show/hide thing has been covered to death on stack, but I just can't find a solution that works for me, sorry. I've tried several JS/jQuery solutions that I found and can't quite get one to behave the way I'd like.
I have many divs that are very similar in content (content changes slightly based on version selected), and all have the exact same style.
Desired behavior
I'd like one div to show by default with all others hidden. Then, based on a link click, a different version div is displayed and all other content divs are hidden.
Basic HTML
<div class="container">
<h1>Header</h1>
<p>Basic info about page</p>
<ul>
<li>Version 1</li>
<li>Version 2</li>
// More links to other divs
</ul>
<div class="content" id="ver1"> // I'd like this div to be the default
Content here // when the page loads. All other divs
</div> // are hidden until a link is clicked.
<div class="content" id="ver2">
Content here
</div>
// More content divs
</div>
I'll have up to a dozen different versions of these content divs.
JS or jQuery is fine, but jQuery is preferred because I'll probably add some kind of show/hide effect. I don't care that greatly about the naming structure of the divs or links.
$("div.containter ul li").each(function(){
$(this).onclick(function(){
$("div.content").hide();
$("div" + $(this).attr("href")).show();
});
});
Wrap that in a $(document).ready or whereever and you should be good to go my friend. Learn the code, so that in the future, you are gosu.
How about adding some more RESTful behaviour.
$(function(){
// get the location hash
var hash = window.location.hash;
// hide all
$('div.content').hide();
if(hash){
// show the div if hash exist
$(hash).show();
}else{
// show default
$("#ver1").show();
}
$("div.containter ul li a").click(function(){
// hide all
$('div.content').hide();
$($(this).attr("href")).show();
});
});
I suggest you to use on() jquery function with selector. And also you can show the default div using css. Here is the complete code.