I would like to show the contents of a div when I navigate to it via a URL. Currently the Div contents are revealed onclick.
How would I get the Div contents to be revealed when using a URL with anchor to navigate to the main title in the ?
Here's javascript
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Set default open/close settings
$('.acc_container').hide(); //Hide/close all containers
//$('.acc_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container
//On Click
$('.acc_trigger').click(function(){
if( $(this).next().is(':hidden') ) { //If immediate next container is closed...
$('.acc_trigger').removeClass('active').next().slideUp(); //Remove all .acc_trigger classes and slide up the immediate next container
$(this).toggleClass('active').next().slideDown(); //Add .acc_trigger class to clicked trigger and slide down the immediate next container
}
return false; //Prevent the browser jump to the link anchor
});
});
</script>
here's my html
<h2 class="acc_trigger">Some Title Goes Here</h2>
<div class="acc_container">
<div class="block">
<h3>Strap Line Goes here</h3>
Text content goes here
</div>
</div>
<h2 class="acc_trigger">Another title Goes Here</h2>
<div class="acc_container">
<div class="block">
<h3>Another Strap Line Goes here</h3>
Some more text content goes here
</div>
</div>
If you're using a hash (e.g. url.com/page.html#otherStuff) then read the location.hash
http://www.w3schools.com/jsref/prop_loc_hash.asp
If you're using a query (e.g. url.com/page.html?otherStuff) use the location.search
http://www.w3schools.com/jsref/prop_loc_search.asp
Put the code below the DIV that you want to show, so the element has been created. Then just do a simple if(hash == "#otherStuff"){ /* Do stuff */ } Where in "Do stuff" you would just run the open function.
listen to the hashchange event which is triggered on the window object. then you can show the div or do what you want with it.
Something along the lines of this;
About
<div id="mydiv_about" style="display:none">
</div>
Media
<div id="mydiv_media" style="display:none">
</div>
and some javascript
window.addEventListener("hashchange", function(){
document.getElementById("mydiv_"+document.location.hash.substr(1)).style.display="block";
},false);
//edit
updated to reflect a working example
Related
I found this code:
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".blurb_click").click(function() {
window.location = $(this).find("a").attr("href");
return false;
});
});
</script>
Here is the Html part of the code
<div class="et_pb_blurb et_pb_module et_pb_bg_layout_darket_pb_text_align_center carre-blurb-homeet_pb_blurb_0et_pb_blurb_position_top">
<div class="et_pb_blurb_content"> <div class="et_pb_blurb_container"> <h4>
Coaching sportifpersonnel</h4> </div> </div> <!-- .et_pb_blurb_content --> </div>
to make a whole class clickable.
I found it here : https://divilover.com/clickable-blurb-module-in-divi-theme/
But when I click on the mouse wheel button (not on the icon or the link to the blurb made clickable) to open a new tab, it activates the all scroll option.
How could we fix this, please?
Thank you,
Nicolas.
If You are trying to make the whole Class clickable . Then
there's just one mistake in your code that you forgot to include the class in the div Just Add that class 'blurb_click' in the div and code will work fine
<div class="blurb_click et_pb_blurb et_pb_module et_pb_bg_layout_darket_pb_text_align_center carre-blurb-homeet_pb_blurb_0et_pb_blurb_position_top">
<div class="et_pb_blurb_content"> <div class="et_pb_blurb_container"> <h4>
Coaching sportifpersonnel</h4> </div> </div>
Okay below I have posted the script I'm using and the #targetDiv, Basically my problem is when I move the link that is currently contained within the #targetDiv outside of the div, The link no longer loads the page inside of the div, Is there a way I can move the link outside of the #targetDiv and still have it load the page contents inside of the div.
Script
$(function(){
$('#targetDiv').on('click', 'a', function(e){
e.preventDefault();// prevent browser from opening url
$('#targetDiv').load(this.href);
});
});
Div
<div id="targetDiv" class="collapse">
Load
</div>
The problem I have is that I want the load link to be outside of the target div however when I move it outside of the div it loads the main page not the content within the targetDiv.
What I'm trying to achieve;
Load
<div id="targetDiv" class="collapse">
</div>
Add a class to any links you want to use to load content
<a class="content-link" href="/page.php">Load</a>
And modify event listener accordingly so it handles both types of links
$(document).on('click', '.content-link, #targetDiv a',function(e){
e.preventDefault();// prevent browser from opening url
$('#targetDiv').load(this.href);
});
Try this:
$(function(){
$('#divLoad').click(function(e){
e.preventDefault();// prevent browser from opening url
$('#targetDiv').load(this.href);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id="divLoad" href="/page.php">Load</a>
<div id="targetDiv" class="collapse">
</div>
You can also do this (more difficult to be precise):
$(function(){
var divLoad = $('#targetDiv').prev('a');
//alert(divLoad.attr('href') );
divLoad.click(function(e){
e.preventDefault();// prevent browser from opening url
$('#targetDiv').load(this.href);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id="divLoad" href="/page.php">Load</a>
<div id="targetDiv" class="collapse">
</div>
Have a problem that can not solve (I'm new in jScript).
I have 3 rows, each contains 4 blocks, row in HTML below (bootstrap):
<div class="row product-element">
<div class="col-lg-3 col-md-3">
<div class="product-element-container">
<img src="img/1_mini.jpg" alt="Texto Alternativo 1" class="img-thumbnail">
<h4>Some text H4</h4>
<p>Some text p</p>
<p>Some text p</p>
</div>
BUY
</div>
...
...
...
</div>
I have also modal window, that opens when user click "buy" button, and I need to copy and elements from "product-element-container" to modal window.
Problem: I don't know how to create proper "select" in jQuery that will chose div with pressed button. What is the best way to do this?
This is a very simple implementation of what you're trying to do:
$('a.launch-modal').click(function() {
var content = $(this).siblings('.product-element-container').html();
$('#modal-register').html(content);
});
First, you add an on click event listener to all <a class="launch-modal"> elements, the callback (i.e. what happens after you click) gets the HTML content of the corresponding <div class="product-element-container"> element and puts it in the <div id="modal-register>
You can use $(this).siblings('.product-element-container') within your button click event callback function.
First give classes to h4 and your p tags inside the container that you want to copy.
Second add an attribute such as data- btnId="button id here" to the button.
Next bootstrap have a event on modal open show.bs.modal and shown.bs.modal which fires on opening and after modal is being rendered on page respectively.
$( '#your modal id" ).on
('show.bs.modal' , function
(event) {
var button =
$(event.relatedTarget) // Button that triggered the modal
var recipient = button.data
('btn id here which is inside container' ) // Extract info from data-* attributes
var modal = $( this)
modal.find( "h4").text( receipt. parent(". containerClassNameHereWhoseContentToBeCopied"). find("h4.classNameOfH4TagHereWhich. IsInsideContainer).text());
// Do same for P tags.
})
Note* your modal should have h4 and p tags. Or you can put values/text to any tag.
What I need
I need when user click on link data is shown.
link disappear after click.
I have tried code
<a href="javascript:void(0);" class="viewdetail more"
style="color:#8989D3!important;">view details
<div class="speakers dis-non">
</div>
</a>
jquery code
$('.viewdetail').click(function() {
$(this).find('.speakers').show();
$(this).find('.viewdetail').hide();
});
problem
when I click on view detail link data is shown on div.
link doesn't disappear.
if I put anchor before div then data is not shown on speaker class div.
any suggestion are most welcome.
jsfiddle: http://jsfiddle.net/fw3sgc21/
Since the div is inside the anchor, the div will also be hidden if you hide the anchor. You need to put the div next to the anchor to make it work. Use next() method to select the div.
HTML
view detail
<div class="speakers dis-non" style="display: none">
test data to be shown
</div>
JS
$('#viewdetail').on('click', function(){
// show div with speakers class next to the anchor
$(this).next('div.speakers').show();
// hide the anchor
$(this).hide();
});
JSFiddle: http://jsfiddle.net/fw3sgc21/2/
EDIT
If you want to wrap the speakers div inside another div as below
view detail
<div class="12u">
<div class="speakers dis-non">
test data to be shown
</div>
</div>
with the following CSS
.dis-non
{
display: none;
}
Here's the JS that should show the speakers div and hide the clicked anchor
$('#viewdetail').on('click', function(){
$(this).next().children('div.speakers').show();
$(this).hide();
});
JSFiddle: http://jsfiddle.net/fw3sgc21/6/
EDIT 2
If you want to put the anchor inside two divs as below
<div class="a">
<div class="b">
view detail
</div>
</div>
<div class="12u">
<div class="speakers dis-non">
test data to be shown
</div>
</div>
Use .parent() method twice to select <div class="a">, then use .next().children('div.speakers').show() to show the speakers div
$('#viewdetail').on('click', function(){
$(this).parent().parent().next().children('div.speakers').show();
$(this).hide();
});
JSFiddle: http://jsfiddle.net/fw3sgc21/8/
Try the following:
$('.viewdetail').click(function()
{
$('.speakers').show();
$(this).hide();
});
$(this) refers to the .viewdetail so you don't need the find it again
Pull the div outside the hyperlink
HTML:
view details
<div class="speakers dis-non"></div>
try this
html
<a href="javascript:void(0);" id="viewdetail" style="color:green">view detail
</a>
<div class="speakers dis-non">
test
</div>
js
$('#viewdetail').click(function() {
$('.speakers').show();
$(this).hide();
});
http://jsfiddle.net/fw3sgc21/1/
First of all this in your code refers to to the clicked link itself.
So this line $(this).find('.viewdetail').hide(); doesn't work, because there is no .viewdetail inside of link. It should be
$('.viewdetail').on('click',function(e) {
var self = $(this);
self.find('.speakers').show();
self.hide();
});
But, if you hide your link, the .speakers will be also hidden, because it's inside of your link. If you want it to be visible, you should place it outside of link
For example:
view details
<div class="speakers dis-non"></div>
And JS:
$('.viewdetail').on('click',function(e) {
var self = $(this);
e.preventDefault(); // prevent link from working the way it should
self.next('.speakers').show();
self.hide();
});
I seem to have same issue as the one I posted before. I want to hide all the divs that are there by default and only display one. Then the user can click on a side tab to display another. Problem is the divs are only hidden for a second after page loads but reappear soon after. This is code that's suppose to hide the divs of the page and only display the div with id of "pple":
$("a#link2").click(function(){$("#content > div").hide(); $("#pple").show();});
markup:
home.html:
<li>About</li>
about.html:
<div id="content">
<div class="tabContent" id="pple">
<p>
Content
<p>
</div>
<div class="tabContent" id="serv">
<p>
Content
</p>
</div>
<div class="tabContent" id="sol">
<p>
Content
</p>
</div>
</div>
Thanks for any response.
You need to return false; on your handler for the <a> element.
This is because the default behavior of the <a> element is occurring and reloading the page, so you need to disable that behavior.
$("a#link2").click(function(){
$("#content > div").hide();
$("#pple").show();
return false; // Will prevent default behavior
// but it also prevents event bubbling
});
Alternatively, you could call event.preventDefault()
$("a#link2").click(function( event ){
event.preventDefault(); // Prevents the default behavior
// and event bubbling is still intact
$("#content > div").hide();
$("#pple").show();
});
http://api.jquery.com/event.preventdefault/
Try to prevent default after the divs are hide
so you can do
...function(event)
event.preventDefault()...