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.
Related
I was hoping someone could help...I'm new to Jquery ....all I want to achieve is a click through on a hyperlinked image but this occurs when a completely separate div on another part of the page is clicked on rather than the hyperlinked image I just mentioned. .......the hyperlinked image needs to be invisible also. In case anyone is wondering why I need this ....it's because I want my own custom button rather than the standard one that comes with a CMS that I'm using and it can't be changed....it's basically a work around the owners of the system suggest.
Here's what I thought would work
<style>
#my-custom-button{
margin: 0 auto;
width: 200px
}
#the-standard-button{
display : none
}
</style>
<div id="my-custom-button">
<img src="../images/order-now.png">
</div>
<div id="the-standard-button">
<?php
proprietary PHP here that renders the standard button
?>
</div>
<script type="text/javascript">
<!--
$(function(){
$("#my-custom-button").click(function(){
$("#the-standard-button").click();
});
});
-->
</script>
The whole
<?php propiertary blah blah ?>
makes it hard to decipher but my guess is that the handler is being generated for whatever is being created by php, i.e. the php generates
<button id="phpButton">
blah
</button>
and then a handler like
$("#phpButton").click(....)
Notice that the handler is NOT on "#the-standard-button". So, you need make sure that you are using the correct selector when calling the click() in $("#my-custom-button").click(...)
Check out this jsFiddle. Notice which secondary click event is fired.
I'm not sure I understand your question perfectly, if what you want is that when You click on one button it will act as though the other was clicked.
Here is a solution that will work IF the default button is also an anchor tag (<a>)
HTML:
<div id="newButton">
<img src="/theimage.jpg"/>
</div>
<div id="oldDiv">
<img src"oldImage.png"/>
</div>
JQuery:
jQuery(document).ready(function($){
$("#oldDiv").hide();
$("#newDiv > a").click(function(){
window.location = $("#oldDiv>a").attr("href");
});
});
I have a web page, I need part of the content separated to an individual page, but not use iframe. Just like to know if it is possible use div instead of iframe and works as it in the same page(With js base code or php code is cool).
I'd need the whole content of <div class="row-fluid">..</div> to be an individual html, but not use iframe, I will need a div instead of iframe, and make it works like just as in one page.
With PHP you can include a page inside your code inside a specific division.
for example inside index.php:
<div>
<?php include('page2.php'); ?>
</div>
and inside page2.php you have:
<span>Hello World</span>
The result would be:
<div>
<span>Hello World</span>
</div>
If what you want to achieve needs to be in the front-end as the user navigates through your site; that is after a click is made to an element and you don't want to change to another page, then AJAX is your option. this example is with Jquery:
$('.clickme').click(function(){
$.ajax({
url:'page2.php'
success:function(msg){
$('#insert_div').html(msg)
}
});
});
HTML:
<span class="clickme">Get Page 2</span>
<div id="insert_div">
<!-- Page 2 will be inserted here -->
</div>
Another solution is Jquery load() as many have posted:
$('.clickme').click(function(){
$('#insert_div').load("page2.php");
});
You can use the jQuery load() method to load the content when the corresponding link is clicked. you can also use this without event clicked with animation.
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>
I have the following code:
<a class="button" href="javascript:ShowHide('elaborate_1')" style="font-size:24px; padding:0 10px; margin-left:10px;">COLLAPSE</a>
<div id="elaborate_1" class="expandable-box" style="display:none;">
<div class="description"><?php //USE THIS CLASS 'description' ON A 'div' TAG FOR A GRAY BOX TO DISPLAY CONTENT ?>
<p class="nomargin nopadding">HELLO</p>
</div><!-- .descpription -->
</div>
The web page currently hides this message "hello" until I click "COLLAPSE" however I want the content to be shown automatically until I click "collapse.
How can I do this?
Change the display:none to display:block on your elaborate_1 div.
Remove the display:none from the containing element:
<div id="elaborate_1" class="expandable-box">
If your ShowHide function is correct, it should work just like that. If not, you should post the code from the function.
Just remove style="display:none;" from your html element
and add following code to your js function (for reference)
document.getElementById("elaborate_1").style.display = "block";
Personally I would suggest taking a look at JQuery. It allows you to take advantage of controlling various effects, like show, hide, toggle, fade, and custom animation, etc. Here is the link: http://api.jquery.com/category/effects/ which might be useful to you.
A little Jquery sample code:
$('a.button').click(function(){
$('#elaborate_1').toggle("slow");
});
I have a fairly novice understanding of CSS and HTML, and I'm trying to do something that I think should be relatively simple (in a custom tumblr theme I'm creating), but I can't find a straightforward answer. I have a feeling there might be a super easy way to do what I want in JavaScript.
I'd like to display a DIV only on the main index page (i.e. homepage) of the tumblr blog. It seems the documentation tumblr provides allows you to do this to some extent (through the {Block:IndexPage} variable), but the problem is the code within this element displays on all index pages (i.e. instead of just showing up at the root level on /page/1, it will show up on subsequent "index" pages like /page/2, etc.
Here's the code I have, which successfully does not show the div on permalink pages:
{block:IndexPage}
<div class="mid2">
<div class="midLeft2">
<p>test</p>
</div>
</div>
{/block:IndexPage}
Any ideas? Any help is much appreciated!
This will work:
{block:IndexPage}
<div id="index"
{block:SearchPage}style="display: none;"{/block:SearchPage}
{block:TagPage}style="display: none;"{/block:TagPage}>
This is displayed only on the index page.
</div>
{/block:IndexPage}
More info: http://ejdraper.com/post/280968117/advanced-tumblr-customization
I was was looking to show code on post pages, but not on the index, search, etc page (i.e. pages with multiple posts. Thanks to the above, I figured out how to do it and wanted to share in case it helps somebody else.
<div id="splashbox" style="display:none">
This is the content I wanted to show on the post pages only.
</div>
<script type="text/javascript">
window.onload=showsplashbox();
function showsplashbox() {
//alert('location identified as ' + location.href);
if (self.location.href.indexOf("post") > -1 ) {
document.getElementById('splashbox').style.display='block';
}
}
</script>
You can also do it just with CSS.
#box{
display:none;
}
.page1 #box{
display:block;
}
<body class="page{CurrentPage}">
<div id="box">
Only displayed in first page.
</div>
</body>
display:none will hide it but thats, a hidden element can still mess with your layout.
We could use the comment code* to turn the div into a comment that wont mess with anything.
*<!-- comment -->
ex.
{block:IndexPage}
{block:SearchPage}<!--{/block:SearchPage}
{block:TagPage}<!--{/block:TagPage}
<div style="width:400px; heigth:200px">
blah blah
</div>
{block:SearchPage}-->{/block:SearchPage}
{block:TagPage}-->{/block:TagPage}
{/block:IndexPage}
The {block:IndexPage} block, as you have discovered, is for all index pages. To target only the first page you can use {block:Post1} inline or {CurrentPage} in script. {block:Post1} will display only on the page with the first post, which achieves what you want. The <div> can then be styled to put it wherever you want.
{block:Post1}
<div class="mid2">
<div class="midLeft2">
<p>test</p>
</div>
</div>
{/block:Post1}
Or:
<script>
if( {CurrentPage} == 1 ) {
//display div
};
</script>
I ended up killing off the {Block:IndexPage} tag altogether and changing the original div callout to this:
<div id="splashbox" class="mid2" style="display:none">
Followed by this script:
<script type="text/javascript">
window.onload=showsplashbox();
function showsplashbox() {
//alert('location identified as ' + location.href);
if (location.href == 'http://site.tumblr.com/' || location.href == 'http://site.tumblr.com') {
//alert('location match, show the block');
document.getElementById('splashbox').style.display='block';
}
}
</script>
This is solved by using div:not() operator.
The HTML Markup will be
{block:IndexPage}
<div id="banner">
<div class="banner_{CurrentPage}">
This Content will appear in only on home page
</div>
</div>
{/block:IndexPage}
Now add this CSS to
#banner div:not(.banner_1)
{
display:none;
}
{block:SearchPage}
#banner
{
display:none;
}
{/block:SearchPage}
{block:TagPage}
#banner
{
display:none;
}
{/block:TagPage}
The background: {CurrentPage} is a Tumblr theme variable which returns the page number of index pages (like 1, 2, 3, ...). Thus the home of any Tumblr blog is page number "1". Now I have defined the class of a div with this page number concatenated with a string "banner_" (Class can not be numeric. WTF why?) - making the class name "banner_1" on homepage. Next, in CSS, I have added display:none property to :not selector of that banner_1 class div. Thus excluding div with banner_1 class, all other div in under #banner div will disappear. Additionally, div with id #banner is hidden in search and tag pages.
Note: <div id="#banner" > is required. Without this, :not will hide all divs in the html.
Warning: IE users (is there anyone left?) need to change their habit. This is only supported in FF, Chrome, Safari and Opera.
I have implemented this in http://theteazone.tumblr.com/ The Big Banner (Tea is a culture) is absent in http://theteazone.tumblr.com/page/2
{block:IndexPage}
<script>
if( {CurrentPage} != 1 ) {document.write("<!--");};
</script>
<div id="banners">
blablabla
</div> -->
{/block:IndexPage}
Alternatively, you can use this tag: {block:HomePage}.
This block renders, as its name implies, on the home page only (ie not on search pages, tag pages etc).
References:
https://www.tumblr.com/docs/fr/custom_themes