I have a div as follows:
<div class="slide_items">
<div class="slide_item"><img src="image"/></div>
<div class="slide_title">title</div>
</div>
What i want to do is, instead of having URL in each item in slide_items div. I want user to click on <div class="slide_items">. I want the slide_items to be clickable as the div itself, rather than putting a href in every inner div.
How can i do this?
The proper way would be to use a single link (but change the inner elements to span for validness)
<a href="/url" class="slide_items">
<span class="slide_item"><img src="image"/></span>
<span class="slide_title">title</span>
</a>
And make sure that they are treated as block elements from the css
a.slide_items, a.slide_items span{
display:block;
}
If you have to go the div way, then use
<div class="slide_items" data-href="/url">
<div class="slide_item"><img src="image"/></div>
<div class="slide_title">title</div>
</div>
and add a script (since you use jquery)
$(function(){
$('.slide_items').click(function(){
var href = $(this).data('href');
window.location = href;
});
});
You can add onclick="window.open('google.com')" event to simulate a link to your div.
In the case where you want the entire div to appear to a be a link, you will want to change your cursor. Add style="cursor: hand; cursor: pointer;" to your div as well.
You can add an onclick property to the div:
<div class="slide_items" onclick="location.href='/url';" >
<div class="slide_item"><img src="image"/></div>
<div class="slide_title">title</div>
</div>
you can use some simple javascript to get this done
use the onclick() event
so your HTML code looks something like
<div class="slide_items">
<div class="slide_item" onclick="function1()"><img src="image"/></div>
<div class="slide_title" onclick="function2()">title</div>
</div>
your javascript code will look like
function function1(){
// insert your code here
}
function function2()
{
// insert your code here
}
the code can be done in many ways depending on what you want , if you just want to redirect to another div , use the display attributes alternating between none and block , more reference here documentation .
if you want to redirect to another site you can use
window.open("your url")
<div class="slide_items">
<div class="slide_item"><img src="image" alt="my image" /></div>
<divclass="slide_title">title</div>
</div>
js:
$(function() {
$('.slide_items').click(function() {
window.location = 'http://www.google.com';
});
});
css:
.slide_items:hover {
cursor: pointer;
}
http://jsfiddle.net/68Smw/6/
The redirect isn't working in jsfiddle, but it should work for you.
if you want it to likley say: Click here to enter site:
<div>
Click here to enter my site!
</div>
Related
I am developing website by using ASP.net. I have following div layout
<div class="mainrepeater">
<div id="image" class="my-ad-repeater-image-box"/>
<div class="my-repeater-title">
<asp:HyperLink ID="hlNavigation" runat="server" Text='<%# Eval("title") %>' NavigateUrl='<%#Eval("ad_url") %>' Target="_blank"></asp:HyperLink></div>
<div class="my-repeater-content"></div>
</div>
I am setting the HyperLink navigate URL from a datasource and everythings works fine. But I want all div(mainrepeater) to be clickable instead of the hyperlink.
So how to achieve that?.
Do I need to use javascript? If not that would be great.
Thank you very much.
CSS
.my-repeater-title { cursor: pointer; }
JS
$(".my-repeater-title").click(function(){
window.location.href = "http://example.com"
});
You should use attribute data-* to retrieve your url on your js script as:
<div class="my-repeater-title" data-url="[url]">
And get on your script:
$(".my-repeater-title").on('click', function(){
var target = $(this).data('url');
window.location.href = target;
});
It's recommended to not write external data like url directly to the js file, but to fetch on html by js.
Another possible option is to wrap <div class="mainrepeater"> with <a> tag.
But this is correct only for HTML5.
For more details please check this post Is putting a div inside an anchor ever correct?
HTML
<a class="mainrepeater_link" href="http://example.com">
<div class="mainrepeater"> ... </div>
</a>
CSS (only if you target a HTML version less than 5.)
.mainrepeater_link { display: block; }
Three possible solutions come to mind
First idea: Make the size of the link bigger
If the link is the only content of your div, you can just add the following CSS to make it fill the div.
.my-repeater-title > a
{
display:block;
width:100%;
height:100%;
}
You might need to set dimensions on .my-repeater-title though. No JS required
Second idea
Swap the div and the link. Change
<div class="my-repeater-title">
...
</div>
to
<a href="...">
<div class="my-repeater-title">
...
</div>
</a>
I'm sure that's possible in ASP too. No JS required either
Third idea: Javascript
Add a click-handler in jquery. This has already been suggested by others, so I won't copy their solution and I won't bother writing a different one.
I am using an admin panel for managment and im trying to jump between tables by hiding them and showing each only when a certain id is clicked.
it doesnt work, I hide the div but I cant show it back again... any suggestions where is the mistake in the syntax? already checked for double id's
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
$(document).ready(function(){
$("#userst").click(function(){
$("#userstable").show();
});
});
</script>
<li>
<i id = "userst" class="clip-grid-6" ></i>
Users
</li>
<div id = "userstable" class="row" style=" overflow:auto; display:none;>
</div>
those are the rellevant lines of code.
Your HTML has some flaws. First the id "userst" has no body. You are targeting the i-tag (italic), which you close before creating the anchor link.
Second you forgot to close the style attribute list in div with id "userstable"
<li>
<i id="userst" class="clip-grid-6" >Users</i>
</li>
To make the anchor tag not fire with jQuery, you would need to add event.preventDefault and have the event as argument in the function.
$("#userst").click(function(event){
event.preventDefault();
$("#userstable").show();
});
Forgot a double quote around style attribute, and add content for div. Also updated Javascript code.
HTML
Try to change from
<div id = "userstable" class="row" style=" overflow:auto; display:none;>
to
<div id = "userstable" class="row" style=" overflow:auto; display:none;">
JS
$("#userst").parent().find("a").click(function(){
$("#userstable").show();
});
FIDDLE
Here is a case:
<a href="#1" style="height:100px; width:100px;">
<div class="#2"></div>
<div class="#3"></div>
<div class="#4"></div>
<div>
<input onclick="#5" />
</div>
</a>
By default, if I click on #2,#3,#4,#5 I will be redirected to #1.
So how I have to fix CSS if I want to click on the input without #1 activation?
Thanks in advance!
Just put a
return(false);
at the end of the JavaScript that is executed when clicking the input.
Yep, you can do it like this:
<a href="#1" style="height:100px; width:100px;">
<div class="#2"></div>
<div class="#3"></div>
<div class="#4"></div>
<div>
<input onclick="doSomething(); return false;" />
</div>
</a>
Assuming your tag is written correctly, use z-index:
<input type="button" style="z-index:99" onclick="foo()" />
Though I wonder if you should rethink your page layout and avoid such a large link tag...
This is an interesting problem that I faced several times.
You basically need to listen for the click event on the parent element, then check if it's an anchor or other element and then act upon it.
$('YOUR ELEMENT').click(function (e) {
var target = $( e.target );
if ( target.is( "a" ) ) {
Do something
}
else if (target.is( "input" ))
{
Do something else
}
});
Although I wouldn't recommend having an anchor as a wrapper to div as it breaks in some cases, with this approach you can easily use a wrapper div with a data-link attribute and navigate to this link programmatically through JavaScript
I want to hide my homepage content after other link is clicked. My homepage content is into
<div class="active">
Homepage content
</div>
css class active and inactive
.active {
margin-top:230px;
font-size: 30px;
color:black;
}
.inactive
{
opacity:0;
}
I tried this script but it is not working.
<script src="jquery.js"></script>
<script>
$("#link-link1").click(function(){
$(this).removeClass("active").addClass("inactive");
});
</script>
I upload it to an web hosting so you can see full html code here and full css file here
$(this).removeClass("active").addClass("inactive");
Is adding and removing the class from your link (which I assume has id="#link-link1)
Instead you need to give your div an id like
<div id="homepage" class="active">
Then in your JS code reference that by id:
$('#homepage').removeClass("active").addClass("inactive");
Even better would be to use jquery's hide() method or toggle() if you wanted it to come back the next time you clicked:
$('#homepage').toggle();
Add an ID to the "Homepage content" div, so we can find it using javascript.
<div class="active" id="contentArea">
Homepage content
</div>
Try placing you jQuery code inside a document read. Optionally place it right before the closing </body> tag. Add the css classes to the "Home content" div and not to the link element addressed by $(this):
$( document ).ready(function() {
var contentArea = $("#contentArea");
$("#link-link1").click(function(){
contentArea.removeClass("active").addClass("inactive");
});
});
Consider using the jQuery function toggle() for changing contents visibility.
Take a look at the manual: http://learn.jquery.com/
Just take a look at that fiddle I make a simple example for you.
In you'r web page you must use better div elments as tabs not a elements
Code:
$("#random_link").click(function(){
//$(".active").css("display","none"); //WORKS TOOO
$(".active").fadeOut();
})
Working Fiddle
HTML
<a id="link1" href="#">Hide Home Page</a>
<a id="link2" href="#">Show Home Page</a>
<br/>
<div id="home_page">
<hr/>Homepage content
<hr/>
</div>
jQuery
$('#link1').click(function () {
$('#home_page').hide();
});
$('#link2').click(function () {
$('#home_page').show();
});
Hope this helps..!!
Update using toggle() based on #Cfreak answer
Updated Fiddle
Since you are using Jquery you can use hide method that will apply to your css of that element display: none;
$('#homepage').hide();
$('#homepage').show(); //to make it visible again
hope it help
You have to change the class for the div, in your code you are change the class of the link, add an Id or class to the div, for example:
<div class="active" id="test">
Homepage content
</div>
<script src="jquery.js"></script>
<script>
$("#link-link1").click(function(){
$('#test').removeClass("active").addClass("inactive");
});
</script>
I'm trying to use next() to toggle a div. The problem is that the "trigger" is in a different div than the one I want to toggle. An example that works:
$("span.trigger").click(function(){
$(this).next("div.task_description").slideToggle("fast");
});
<span class="trigger">The trigger</span>
<div class="task_description ">
some content
</div>
But the way I need the html setup is:
<div>
<span class="trigger">The trigger</span>
</div>
<div class="task_description ">
some content
</div>
That doesn't work... any suggestions?
In this case you need a .parent() as well, like this:
$("span.trigger").click(function(){
$(this).parent().next("div.task_description").slideToggle("fast");
});
Alternatively, if your nesting may change, you can go up to the <div> you're in, like this:
$(this).closest("div").next("div.task_description").slideToggle("fast");