I have a wordpress posts link and around list item (each post) i have hyperlink, but the problem is that mu hyperlink becomes with width and height of 0 and all that block of post is not linkable, however in the source code from browser i can see that it shows more hyperlinks and they close as they open so they are width and height of 0, just around title and content hyperlinks affects them and makes them linkable, to note again in code i have just one hyperlink.
EDITED
Somehow i have more links displayed even if i have one wrapped all the content, on browser it shows few more links and if i delete that one, they all removes
<li>
<a class = "posts_link" href="www.google.com">
<div class = "posts">
<h2><?php the_title(); ?></h2>
<div class = "posts_list">
<?php the_content('Read more...');?>
<div class = "clear"></div>
</div>
<div class = "addition">
<div class = "add_time">
<time datetime="<?php the_time( 'Y-m-d' ); ?>" pubdate><?php the_date(); ?> <?php the_time(); ?></time>
</div>
<div class = "add_comment">
<?php comments_popup_link('Leave a Comment', '1 Comment', '% Comments'); ?>
</div>
<br />
</div>
</div>
</a>
</li>
If all that you want to do is make the whole div clickable, there are certainly better ways. One of them would to add a onclick function to your div and write the function, could either be window.open or location.href, both will do the job.
It's hard to tell from this screen but did you add display:block to your a href? If you want an area to link you need to replace default display:inline to block..
Your problem is that
You're using a foreach loop
The link is not being provided with any text
Untill the link is provided with text, its height and width will have no meaning at all. Because there is nothing you can click on. However adding a little bit padding might do the work.
http://jsfiddle.net/afzaal_ahmad_zeeshan/Jes6e/
a {
padding: 5px; // to make it clickable
border: 1px solid #333; // to make it visible..
}
In the fiddle you will see that the link is having no width or height but is still clickable. Why? Because it creates some space for the element to be clickable.
When there is no space, nothing is clickable and so no element is linked.
I have tested your code,
http://jsfiddle.net/afzaal_ahmad_zeeshan/8NdnF/ Here is the fiddle for that. And guess what? Whole of the element is clickable.
Related
Have look on this code:
<a href="#" class="list-group-item">
<span class="badge"><?=$st ?></span>
<img class="small_profile_pic" src="<?=$pic ?>" /> aaa<?=$msg['UserName'] ?> :
</a>
this is a row that show a message in short type. in this row I need to <?=$msg['UserName'] ?> be after image but it going to next line.
when I type word without a tag its OK but links goes to next line. How do I fix this?
more explanation on this pic:
Please notice that I can't use float, if there is another way except float please tell me that.
Edited:
(I have fixed that place by changing parent tag to span but ...)
I need to make whole row a link to that specific message and make username a link to user profile. Who can I place links inside each other?Or another solution maybe?
Second Edit
I have placed a tags inside each other and both of them works well but still second a tag goes to next line! I have tried display:inline but whole row collapsed!
You can't use 'a' tag in "a" tag .... but just for you If you want to align it after image use style property and use ,
<a href="#" class="list-group-item">
<span class="badge"><?=$st ?></span>
<img class="small_profile_pic" src="<?=$pic ?>" style="display:inline" /> aaa<?=$msg['UserName'] ?> :
</a>
I've made a small image gallery with 'Image Thumbnail Viewer 2' Link here
script allows title attribute below image that is expanded. Everything works fine but I cannot find a way to style the text in the title attribute.
All i want to do is change some basic features i.e. font-family, font-size, margin etc. nothing fancy.
<tr>
<td>
<a href="img/test%20images/IMG305eng.jpg"
rel="enlargeimage"
rev="targetdiv:main,trigger:click,preload:yes,fx:fade"
title="<em>Hello World</em> - 2014 - 20x30x5cm">
<img src="img/test%20images/IMG305eng.jpg">
</a>
</td>
</tr>
above is an example of one image thumbnail
Each image will will need a different caption underneath it. not sure if its worth using the title attribute or just doing it another way entirely.
Thanks - second post on stack-overflow so let me know if i'm doing anything wrong.
You need to target the markup (HTML) that the plugin generates as #Aziz has pointed out.
Your text (when hovering an image) is contained in an element with the ID of #loadedarea.
#loadedarea {
font-weight: bold;
color: red;
}
you may need to modify the js script to insert a specific tag :
example: instead <br/> i added a <p> https://jsfiddle.net/x7w12etr/2/ (fixed and updated fiddle)
modified: (notice that you can add a class or id to this extra tag holding the alt attribute value of image)
if (setting.link)
imghtml=''+imghtml+''
imghtml='<div>'+imghtml+((setting.enabletitle!='no' && $anchor.attr('title')!='')? '<p>'+$anchor.attr('title') : '')+'</p></div>'
return $(imghtml)
}
From here you can target that p with css .
original:
if (setting.link)
imghtml=''+imghtml+''
imghtml='<div>'+imghtml+((setting.enabletitle!='no' && $anchor.attr('title')!='')? '<br />'+$anchor.attr('title') : '')+'</div>'
return $(imghtml)
},
How would I go about making this div a link to a page? There are some links within the div, which I am wondering, does that prevent me from making the entire div a link? as you can see I have tried wrapping the div in a a tag, but that does not work. I got it to work with javascript, but the 'hand' pointer doesn't show up when hovering over the div. I know I could add this in CSS, but I would prefer to do it with link tags.
<a style="display:block" href="viewmessagethread.php?id=<?php echo $messageid; ?>">
<div class="<?php echo $message_read_status; ?>">
<div class="media-body">
<span class="pull-right noti-time"> <?php echo $dte_new; ?></span>
<div width="100%"><b><?php echo $title;?></b>
</div>
</div>
</div>
</a>
Sincere thanks for any help. It is greatly appreciated.
Yes, if there are links within the <div>, that won’t work. An <a> element automatically ends at the start of another “nested” <a> element. Just like with <p>.
See the MDN docs on <a>:
Permitted content: flow content (excluding interactive content) or phrasing content.
Permitted parents: Any element that accepts phrasing content, or any element that accepts flow content, but always excluding <a> elements (according to the logical principle of symmetry, if <a> tag, as a parent, can not have interactive content, then the same <a> content can not have <a> tag as its parent).
Is it possible to wrap an <a> tag around <div>s like so:
<a href=etc etc>
<div class="layout">
<div class="title">
Video Type
<div class="description">Video description</div>
</div>
</div>
</a>
Eclipse is telling me the div's are in the wrong place?
If this is not allowed. How can I make the entire 'layout' class become a link?
That structure would be valid in HTML5 since in HTML5 anchors can wrap almost any element except for other anchors and form controls. Most browsers nowadays have support for this and will parse the code in the question as valid HTML. The answer below was written in 2011, and may be useful if you're supporting legacy browsers (*cough* Internet Explorer *cough*).
Older browsers without HTML5 parsers (like, say, Firefox 3.6) will still get confused over that, and possibly mess up the DOM structure.
Three options for HTML4 - use all inline elements:
<a href=etc etc>
<span class="layout">
<span class="title">
Video Type
<span class="description">Video description</span>
</span>
</span>
</a>
Then style with display: block
Use JavaScript and :hover:
<div class="layout">
<div class="title">
Video Type
<div class="description">Video description</div>
</div>
</div>
And (assuming jQuery)
$('.layout').click(function(){
// Do something
}):
And
.layout:hover {
// Hover effect
}
Or lastly use absolute positioning to place an a anchor with CSS to cover the whole of .layout
<div class="layout">
<div class="title">
Video Type
<div class="description">Video description</div>
</div>
<a class="more_link" href="somewhere">More information</a>
</div>
And CSS:
.layout {
position: relative;
}
.layout .more_link {
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-indent: -9999px;
z-index: 1000;
}
This won't work with older versions of IE, of course.
While the <a> tag is not allowed to contain <div> element, it is allowed to contain other inline elements such as <span>.
When I encountered the problem i swapped the div tag with a <span>. Since the span tag is an inline element, you need to apply a display:block to the css of your <span> element, in order to make it behave like the <div> block element.
This should be valid xhtml and does not require any javascript.
Here's an example:
<a href="#">
<span style="display:block">
Some content. Maybe some other span elements, or images.
</span>
</a>
Another simple solution - just add an onclick event handler to the div thusly:
<div class="layout" onclick="location.href='somewhere'">
<div class="title">
Video Type
<div class="description">Video description</div>
</div>
</div>
This works great for me but there is one small gotcha. I'm not sure how search engine friendly this is. I fear that google's web crawlers might not find this link so I also tend to include a traditional A HREF link somewhere in the block like this:
<div class="layout" onclick="location.href='destination_url'">
<div class="title">
Video Type
<div class="description">Video description</div>
</div>
This is a link
</div>
Timothy's solution is correct ... instead of wrapping an anchor around a div ... you simply give layout to the anchor element with display:block and add the size and width of the anchor ...
.div_class { width: 100px; height: 100px; }
.div_class a { width: 100px; height: 100px; display: block; }
<div class='div_class'></div>
HTML provides two general elements, where div is a natural block element, and span is a natural inline element. All other elements are similarly assigned to be a natural block or inline.
Now, while both can be made by css display to be any of inline, inline-block or block, they are still treated for enclosure purposes as their natural selves, hence the warning messages. Leopards and spots sort of thing.
However, css is only meant to be for making what an element looks like (presentation), but not actually be like (functionality), so it doesn't change an element's basic nature, though that gets very fuzzy in practice. A span made block becomes a bully that kicks everything else off the line, which is very un-inline sort of behaviour.
So, to mitigate against possible conflicts between their natural and css-induced behaviours, it is better to allow:
div or any natural block tag to only ever be block or inline-block.
span or any natural inline tag to only ever be inline or inline-block.
This will also mitigate against tending to build page structures that will likely end up churning out error and warning messages.
Basically, NEVER embed a natural block tag inside a natural inline tag, at any depth.
Why there is a really a distinction is perhaps due to a simplistic idea of what HTML was going to be used for when it was first dreamed up.
Certainly, framework makers got around a lot of these what-to-embed-where problems by just using myriads of divs everywhere, and 'divitis' was born, and still alive and well in every framework. Just have to press F12 in a browser on almost any commercial web page and drill down through a dozen divs. This very page has 15 unbroken levels of divs.
It is not hard to see why just settling on divs made sense. For example, a p tag may have a bunch of links to various sites, and that is ok because inline links are allowed in a block p. However, if not wanting to have query variables visible in those urls, then buttons are required. If only one, then the p can be put inside a form, as a p cannot contain a form.
The formaction attribute on a button can be used to target a url other than the form default, but it still does not allow independent forms, each with their own set of hidden inputs. A button can use the form attribute to use it with a form that isn't an ancestor, but it can get messy to keep track of.
For multiple links to different sites to appear as part of one paragraph though, the only way is to use a div instead of the p and then wrap each button in its own form set to inline. Most frameworks have to cope with so much more complex scenarios that nested divs are the only way to go.
It meant that they really only had to manage one tag per purpose and manage it as if it was an isolated environment. So what was meant to be an occasionally-used functional grouping tag became the web's Lego block. And none of them are going to risk breaking their frameworks by converting to HTML5 semantic tags in a hurry. In the end, semantic tags only really work for fairly static content rather than rich interactive sites.
I had tried to create custom solution using jQuery, which would imitate same behavior as a tag does, for parent DIV.
DEMO:
https://jsfiddle.net/kutec/m9vxhcke/
As per W3C standard, you cannot do this:
<div class="boxes">
<a href="http://link1.com" target="_blank">
<div class="box">
<h3>Link with _blank attr</h3>
</div>
</a>
</div>
You must follow this:
<div class="boxes">
<div class="box">
<h3>
Link with _blank attr
</h3>
</div>
</div>
But by following above code, you wouldn't get the whole DIV clickable :).
Correct structure should be something like this, which also allows you to click over the DIV to redirect on the given href value:
<div class="boxes" data-href="http://link1.com" data-target="_blank">
<div class="box">
<h3>
Link with _blank attr
</h3>
</div>
</div>
Simple Solution:
$(function() {
$('.boxes a').each(function(){
var aTag = $(this).attr('href');
$(this).parent().attr('data-href',aTag);
$("[data-href]").click(function() {
window.location.href = $(this).attr("data-href");
return false;
});
})
}(jQuery));
Dynamic Solution:
(function ( $ ) {
$.fn.dataURL = function() {
// variables
var el = $(this);
var aTag = el.find('a');
var aHref;
var aTarget;
// get & set attributes
aTag.each(function() {
var aHref = $(this).attr('href');
$(this).parent().attr('data-href',this);
aTarget = $(this).attr('target');
$(this).parent().attr('data-target',aTarget);
});
// imitation - default attributes' behavior on "data-" attributes
$(el).delegate('[data-href]','click', function() {
var loc = window.location.href;
loc = $(this).attr("data-href");
aTarget = $(this).attr('data-target');
if(aTarget == "_blank"){
window.open(loc);
} else {
window.location = loc;
}
return false;
});
//removing attributes from selector itself
el.removeAttr('data-href');
el.removeAttr('data-target');
// css
$('[data-href]').css('cursor','pointer');
};
}( jQuery ));
Final call:
<script>
$('.boxes').dataURL();
</script>
Hope this would be helpful :)
You would just want to style the "a" tag as display: block;
Eclipse is appropriately telling you that your HTML is not to spec (as a div tag is not allowed in an anchor tag).
But, since you seem to want to be visually making the anchor look like a big-ol-box, then simply style it as such :)
One easy way to make the div a link/clickable is by using html javascript onclick attribute:
<div class="clickable-div" onclick="location.href='#';"><div> ... </div></div>
I have a div that is encased in an html <a> tag, so clicking anywhere on that box will lead the user to a new location.
I would like to add one button inside that box that leads somewhere else (a more specific location than the encasing div's link.
At the moment, adding that second <a> tag inside my div closes the original <a>, which makes sense as I guess these tags cannot be nested. How can I accomplish this 'nested' link problem?
Update
I need to build a rel attribute because it toggles an expanding section in the outer div.
My current code:
<a class="toggle" rel="toggle[<%= "#{user.id}" -%>]">
<div>
<a>...</a>
</div>
</a>
<div class="expand_me" id=<%= "{user.id}" -%>>
...
</div>
I've been trying to get the javascript you have suggested to work, but it doesn't. How should I get this specific case to work? I apologize for not including this information at the outset - I didn't know there would be a real difference between getting the solution to work with an href instead of the needed rel.
you could instead add an onClick handler to the div, and could place the link safely inside the div.
<html>
<head>
<script>
function clicked(){
window.location.href="link2";
}
</script>
<style>
body{
width:50%;
margin-left:auto;
margin-right:auto;
}
</style>
</head>
<div width="100px" height="100px" style="background-color:red" onclick="javascript:clicked()">
test
</div>
</html>
Not only <A> elements cannot be nested, but (I believe) that the content must be inline, so DIV should not be used for links. I'd use, onclick in the outside DIV, for example:
<div id="myparentdiv" onclick="alert('go somewhere')">
hi bla bla blah
<br> hi <br>
<a onclick="document.getElementById('myparentdiv').onclick=undefined;return true;"
href="http://stackoverflow.com/">go to st</a>
</div>
Obviously, you should replace the alert call with your redirection.
The inside onclick is to avoid the event propagation.
This problem can be solved with jQuery like so:
<div class="linked">
Text
<div class="linked">
Text2
</div>
</div>
<script type="text/javascript">
$("a").each(function(){
var aTag = this;
$(aTag).ancestor('.linked').click(function(){
window.location.href = $(aTag).attr('href');
});
});
</script>
This gives you the best of all worlds: semantic HTML, and the auto propagation of a tag behavior up to the nearest 'linked' ancestor. It also conveniently allows for nesting.
I agree with what the other users suggested. A tag can only be inline elements and therefore cannot wrap any other elements. Solution is to use the onclick event to handle the case where the user will click on the div tag. Inside the div tag then you can put other a tags which can point somewhere else.
This method however has a flaw, that is search engines will not be able to crawl the link wherever the onclick event is pointing. One way to fix this is to have another explicit link on the page which will point to the same link as the onclick. Here is the example:
<div onclick="document.location.href = 'link1.html'">
<p>Content would go here...</p>
Click here or anywhere near me to go location 1
Click here to go to location 2
</div>
NOTE: The first a tag does not have to be inside the div tag.
This will allow users to click either inside the div or on the first a tag to go to link1.html, and the other a tag will go to link2.html. This will also allow search crawlers to index both links.
I would also recommend applying some CSS to the div tag, and wrapping the onclick javascript code into a function to make the code more manageable but that's not necessary.
Hope this helps.
If browser compatibility isn't of utmost importance, then you should have a look at this pure CSS solution. By using an AP anchor and the z-index property, you can have an anchor that's as big as the outer div that is layered on top of all the other contents.
In it's simplest form, it could look something like:
<div id="about_us">
<h3>About Us</h3>
<p>This website is the culmination of several months of intensive research
and collaboration. </p>
<p>We painstakingly gathered data and are presenting it to the world here. </p>
Read More
</div>
CSS:
#about_us {
position: relative;
}
#about_us a {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: 100;
text-indent: -9999px;
}
This will give you anchor with the same size as the parent div, and is above all of the contents, as well as hide the link text so that it won't appear at the top left corner of the div.
For a more complex example, see: http://jsfiddle.net/545xy/2/