Tell me how to add href to a link via CSS. How to do it in the standard way is clear.
<div>
Button
</div>
But I need pure HTML. And in CSS, specify which address to make the transition to.
<div>
<a class="button-click"></a>
</div>
.button-click a {href:"https://example.com"}
How do I specify a path in CSS?
CSS cannot be used to perform action or make changes to DOM. Its used for presentation purpose.
You can use script to do the manipulation not css.
Related
I think this is very unlikely but is there any way in CSS to achieve moving elements in the DOM? Like moving jt-menu-item-price into the jt-header in the following?
<div class='jt-row'>
<div class='jt-header'>this is what I need done</div><div class='jt-menu-item-price'>37.23</div>
</div>
<div class='jt-row'>
<div class='jt-header'>this is what I need done<div class='jt-menu-item-price'>37.23</div></div>
</div>
Not using CSS, no. You can manipulate the DOM using JavaScript, but not with CSS. You could 'visually' move it with CSS, but that wouldn't affect the DOM structure, just how it is presented.
You have to use Javascript to manipulate the DOM. CSS never affects the DOM, just let you style it.
Hy, I have the following situation:
I am trying to change the design of my feedly-index page. (I can not change the HTML)
And I am facing a problem I coulnd't solve the past two hours.
In the HTML there are some div elements with random IDs and '_content' at the end.
Within these div's there is an img tag - what I want to do is to wrap this img-tag with an anchor-tag to make it clickable.
Situation:
<div id='{SOME_RANDOM_ID}_content'>
// a bit of text, a few <br> and some other tags here
<img src='LINK_TO_AN_IMAGE'>
</div>
What I want as outcome:
<div id='{SOME_RANDOM_ID}_content'>
// a bit of text, a few <br> and some other tags here
<a href='LINK_TO_AN_IMAGE'>
<img src='LINK_TO_AN_IMAGE'>
</a>
</div>
Is this even possible with CSS?
I could make it work with JavaScript, but the div's are loaded dynamically via AJAX:/
So the JavaScript Script would just run for the current div's but not the one which are loaded dynamically.
It's not possible with just CSS because CSS is meant or styling the page and not or adding dynamic elements to the page.
But we can do it using JS.
As you are creating those elements using ajax call. On the success callback of the ajax call, you can wrap the image with a tags.
for example:
$.ajax({
url : "/make.php"
}).done(function() {
var images = $("div img");
$.each(images, function() {
$(this).replaceWith($("<a href=''>"+this.outerHTML+"</a>")); //construct url dynamically via some variable
});
});
DEMO
If you are not able to edit the html this could be tricky.
It can't be done with pure css... css can't create links.. I mean it could be possible with js i suppose, besides that if the ids are random it makes it even more difficult.
--edit additional--
If you could wrap the whole area that holds the divs inside a div then you might have a chance with jquery...
e.g:
<div id="holderdiv">
<div id='{SOME_RANDOM_ID}_content'>
// a bit of text, a few <br> and some other tags here
<img src='LINK_TO_AN_IMAGE'>
</div>
</div>
You can then use jquery to make all instances of #holderdiv > div > img a link to the image path?
I have finally figured out how to use the Twitter Bootstrap Tooltips, and I am trying to style it. I have asked similar questions about other plugins, and they all ended up being specific CSS selectors. For jScrollPane, the track's selector was .jspTrack.
Fiddle
My question is, what is the CSS selector for the Twitter Bootstrap tooltips?
The documentation linked in the comments shows you a sample of the markup that's produced when a tooltip is generated:
Markup
The generated markup of a tooltip is rather simple, though it does require a position (by default, set to top by the plugin).
<div class="tooltip">
<div class="tooltip-inner">
Tooltip!
</div>
<div class="tooltip-arrow"></div>
</div>
It should be fairly easy to determine the CSS selector based on this.
There are additional class names attached to .tooltip that you can see if you open your browser's DOM inspector and then hover your form element. The one in your example generates the following .tooltip element:
<div class="tooltip fade right in" style="…">
If you need to select only the tooltip belonging to a specific trigger element, that depends on where exactly the tooltip is placed in the DOM. The documentation says (just above the first section I quoted):
Usage
The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element.
So the selector would be .mytrigger + .tooltip where .mytrigger is the form element triggering that tooltip. The DOM position is determined by the container option, otherwise it's the default as stated.
I have a <div> classed as class="tooltip" which is normally hidden with display:none.
I would like the <div> to show with display:block when an area of my image-map is clicked. I am planning on using the :target pseudo-class.
Here is the simplified version of my code :
<img id="slot" class="single" src="slot.png" usemap="#slot"/>
<map name="slot">
<area
shape="poly"
coords="30,0,61,15,31,31,0,16"
alt="Slot"
href="#trigger-happy">
</map>
<div class="fixed-container">
<div class="tooltip">
Slot
</div>
</div>
As you can see, the trick is that the href is hidden away within the <area> tag. From what I understand, it is currently impossible to select a parent with pure CSS.
Would you have any suggestions on how to perform this task ? I'm not familiar with JavaScript, so a pure CSS answer would be ideal. I know I'll have to get down to JS eventually however, so a JS fix would also be acceptable if there is no other way.
It should be noted that I can already achieve similar results with the :hover pseudo-class, by applying it to the map tag. When using map:hover, the browser reacts perfectly. However, for actual clicking rather than hovering, I'm not sure I can just use <a> with <map>, it doesn't seem to work.
You are targeting #trigger-happy via href, therefore you would add id="trigger-happy" to the element .tooltip.
Here is a working example.
Updated HTML:
<div class="fixed-container">
<div id="trigger-happy" class="tooltip">
...
</div>
</div>
Use the :target pseudo class to style the targeted element, #trigger-happy.
The base CSS would look like this:
#trigger-happy {
display:none;
}
#trigger-happy:target {
display:block;
}
The downside to the :target approach is that once something is clicked, it is clicked. There isn't any toggling available with this option. I imagine you could use the checkbox hack if you wanted it to be toggleable, otherwise JS would be needed.
I'm trying to make a "clickable" region.
<a
style="display: block"
href="http://stackoverflow.com">
StackOverflow
</a>
A is an inline element but the CSS made it a block.
If the above is valid, then the following should be valid too:
<a
style="display: block"
href="http://stackoverflow.com">
<div>Some DIV that links to StackOverflow</div>
</a>
But validator.w3.org shouldn't be flagging it as invalid (which it is right now).
If it is invalid, what would be the most proper way to make a block element "clickable" and redirects to an arbitrary page. I'm aware I can use JS onclick to achieve this behaviour, but how will Google see this?
The validator is correct - you can't put <div> inside <a>, no matter what you do afterwards with CSS.
The proper thing to do is what you did in your first code block - <a style="display: block;">
If you want something inside that you can do <a style="display: block;"><span style="display: block;">
Don't confuse valid HTML with valid CSS. It is valid to use the display css property to make inline elements block. It is not valid to put block HTML elements within inline ones.
It doesn't follow that the one being valid implies the other has to be. There are nesting rules for HTML, and div-within-anchor doesn't fit them, which is why validator.w3.org is giving you a hard time.
If you truly must have a div, rather than text, images or <span style="display: block">s, that's clickable, then yes, you will have to use an onclick event. Google will not understand or acknowledge the existence of the link. (You may be able to cope with this by having an anchor on something that anchors can apply to, in addition to the onclick div.)
Something I've done in the past with this sort of problem is invoke the click on the parent element (My example uses jQuery):
<div class="link">
Visit Google
</div>
$(".link").click(function(){
document.location = $(this).find("a:first").attr("href");
});
With styles you could make the entire area appear to be the link by setting the cursor, a roll-over state, etc.
First you need to know whether you want to use strict or transitional XHTML (frameset is not useful here). Then you look into the DTD (link) and you'll see that A cannot have a DIV inside.
Why don't you use an area tag for this? It is supposed to define the clickable area in an imagemap.
Google bots now follow simple javascript links, so using JS on the onClick event of your div is an option. Other search engine bots don't do that, but sooner or later they will.
More info in this article.