I have a link inside a div and I need to make the whole div clickable... found several tutorials on the Internet but non of them worked for me...
Raw JavaScript:
<div onclick="alert('You clicked me !')">Click Me</div>
jQuery:
$('#div_id').click(function(){
alert('Clicked !!');
});
Update: (With reference to your link)
<div class="myBox">
blah blah blah.
link
</div>
jQuery:
$(".myBox").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
The above code cancels the default action of link (going to link) with return false and binds the click event to the div with class myBox, then it finds the link's src attribute inside the div and window.location is used to redirect the page to the src attribute of the link present inside the div. So this basically makes the div clickable.
If you're saying you want the entire div to be clickable for navigation, then you can either wrap it with an anchor () tag, which is not standards compliant, or add a css style to the contained anchor tag, making it the size of the containing div, which is standards compliant. I will use a div that is 250px by 250px in this example:
<div id="container">Link</div>
I ran into this problem last year. I simply added an onclick to the div. Like so: <div id="testimonial" style="cursor:pointer;" onclick="document.location='http://www.mysite.com/testimonials.html'">
In HTML5 it is now valid to have a div or whatever inside an a. That should do the trick. No scripts needed, unless that's what's in your link.
You can use a JavaScript code at to achieve your goal,
please take a look at this tutorial.
$(".myBox").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
and this is the HTML example :
<div class="myBox">
blah blah blah.
link</div>
but there is a tricky way to achieve this using a CSS code
you must nest an anchor tag inside your div tag and you must apply this property to it,
display:block;
when you've done that,it will make the whole width area clickable (but within the height of the anchor tag),if you want to cover the whole div area you must set the height of the anchor tag exactly to the height of the div tag,for example:
height:60px;
this is gonna make the whole area clickable,then you can apply text-indent:-9999px to anchor tag to achieve the goal.
this is really tricky and simple and it's just created using CSS code.
here is an example: http://jsfiddle.net/hbirjand/RG8wW/
Related
I have this little issue here with my page, where if I reload it while being anchored, the anchor remains and there is a problem to it. I.E
http://localhost/public/product/1#mod1
The anchor is #mod1, and while the anchor remains active after refresh, my CSS code is saying that this element:
.overlay:target
is active. Which is a very big issue, because then it doesn't allow me to explore the functionallity I have implemented on this anchor, unless I remove the #mod1 from the end of the page manually by hand. Because this CSS element makes this div visible when it should be not unless activated with the a href element.
(?)
<div id="mod{{$key}}" class="overlay">
content
</div>
Any ideas on how could I solve it? I tried catching whether the user has refreshed the page and redirecting him to an action/route/url, but the page stays blank then and URL unchanged.
You cannot use href with angularJS because it will misdirect the target link. AngularJS is a markup language for HTML, it is not HTML. Because angularJS is not HTML, we're provided a special set of directives to write angularJS values inline into HTML markup. The answer to solve your issue would be to replace the href tag in the anchor element with the angularJS directive ngHref. You can find more information about how to use ngHref and other directives at the link below. Good luck.
https://docs.angularjs.org/api/ng/directive/ngHref
Well I wanted to purely solve this without JS, but here's what I did, HTML:
<a ng-href="mod{{$key}}" class="button">(?)</a>
<div id="mod{{$key}}" class="overlay">
Then replaced the CSS of overlay:target to -> overlay:active, and implemented JS:
var curmod;
$('a.button').on('click', function(e)
{
curmod = document.getElementById($(this).attr('ng-href'));
$(curmod).addClass('active');
});
$('.popup a.close').on('click', function(e)
{
$(curmod).removeClass('active');
curmod = null;
});
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 am creating a JavaScript bookmarklet to toggle the visibility of an HTML Element on a page, but it seems like just hiding the element is troublesome:
http://codepen.io/anon/pen/HtkzL
Code:
<div id="hideme">
<p>I am a div that needs to be hidden</p>
</div>
<p>I am a paragraph that doesn't need to be hid.</p>
<blockquote>
I am a blockquote that the whole world must see
</blockquote>
Click me to hide the div.
what's happening is that every the anchor link is clicked, the entire page goes blank and says "none".
When I inject the exact same code in the <a> ... </a> in a JS console, it works just fine.
Any possible fixes for the problem?
It actually is hiding the element, but it's also following your anchor right after (to nowhere). You can return false, or a falsy value. I'd wrap it in void which will return undefined, but either will work. Here's your codepen and the code: http://codepen.io/anon/pen/dsgKk
Click me to hide the div.
(This would also work, but is less clean, imo):
Click me to hide the div.
getElementById('hideme');a.style
Offhand, I'd say because the browser is confused with your variable name;
also, the code would be:
getElementById('hideme').style.display.....
I have a div that appears on my site from a compiled module which I can't edit. I just want to hide this div for now - eventually the module will be replaced.
The div does not have a classname or id but on the pages it appears on it is the first dv after the body tag and starts out like so
<div align="right">
<font size="-2" color="#808080">
Found session:
I don't want to inadvertantly hide some other div if it appears on one of the site pages so was hoping there is some way to use the above data - perhaps 'if div contains "Found session:" to make sure it is the right div and hide it. I don't know jquery mostly just use existing script with minor tweaking so would appreciate detailed response.
Try
$('body div').first().filter(':contains("Found session:")').hide()
$('body div').first() finds the first div within the body element and the filter() will make sure the element contains the text Found session:
I recently setup custom rotational banners on my blogger using this code I come across but I can't seem to figure out how to make the images clickable to link to the homepage.
Any help would be much appreciated.
Heres the code:
<script type='text/javascript'>
var HeaderImage= new Array()
HeaderImage[0]="http://Example1.png"
HeaderImage[1]="http://Example2.png"
HeaderImage[2]="http://Example3.png"
HeaderImage[3]="http://Example4.png"
HeaderImage[4]="http://Example5.gif"
HeaderImage[5]="http://Example6.png"
HeaderImage[6]="http://Example7.png"
var random=Math.round(6*Math.random());
document.write("<style>");
document.write("#header {");
document.write(' background:url("' + HeaderImage[random] + '") no-repeat left TOP;');
document.write(" }");
document.write("</style>");
</script>
Its working now guys.
I just wasn't sure exactly where to put the tags everyone was teling me.
Thanks very much for all your help.
This code has issues with " instead of ". But aside from that, what this code is doing is setting the background image for an object with id="header". To make that object clickable, you can surround the header object with an <a> tag. For example, if the header object was a div, then you would use something like this:
<div id="header"></a>
If there's some reason why you don't want to use a link to make the area clickable (which is the simplest way to do it), then you could also use javascript like this:
document.getElementById("header").onclick = function() {
window.location = "http://my.example.com";
}
This would either be placed after the page HTML (so the object in question is already loaded when this code runs).
If you show us the actual HTML that includes the header object, we could be more specific about how to make it clickable.
From reviewing your HTML, if you want to make it clickable with just your HTML, you can change this part of your HTML:
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Mum4d.com (Header)' type='Header'/>
</b:section>
to this (which just surrounds it with an <a> tag:
<a href="http://my.example.com">
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Mum4d.com (Header)' type='Header'/>
</b:section>
</a>
Well, you don't actually have any image elements, so that's your first problem.
The simplest solution (to make images clickable) is to wrap images in anchor tags with the href attribute set to your index. What it seems like you're actually doing is dynamically writing some css for an element with id #header and setting its background to the image. When you do this, there are no actual img elements, so there's nothing for a user to click on other than the element itself.
Without seeing any more of your markup, I'd suggest just wrapping your #header element in an anchor like this <a href='/'><some_element id='header'></some_element></a>
Idk how Blogger works, so I'll just tell you the quick and dirty way to get it working with javascript.
Put this after the code you showed us, even after the closing script tag
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
$(function() {
$('#header').click(function() {
window.location = '/';
});
});
</script>