I have the next two elements on an HTML file:
<a id="a1" href="?cssfile=css-folder/015/styles.css">Style number 015</a>
<div id="a1Preview"></div>
The first one (anchor) is a reference to a CSS that will be loaded dynamically by the page. The second one (div) pretends to be a preview (thumbnail) of the style sheet.
THE PROBLEM IS I need a way to set the div background dynamically from the CSS, something like:
#a1Preview
{
background: url(css-folder/{"015" extracted from the <a> element}/preview.png);
}
Is this possible? Any ideas? Of course the HTML is untouchable. I can only change the CSS.
Thanks in advance.
You could use jQuery to change the css content dynamically. jQuery is a extension to javascript. From there you could then use the system you use to skin, but generally to extract href attributes from tags and change CSS, you can use such a thing.
Related
I am editing a HTML website template, and I need to change the banner height so I edited external CSS. However, somehow it is taking an inline CSS height property so there is a space left in between.
Please let me know, if I have not written any inline CSS (and there is no inline CSS in html page), from where is that height property coming from.
Code I see in console is:
<div style="display: block; height: 445px;" id="camera" class="camera-wrap camera_wrap">
And my code is:
<div id="camera" class="camera-wrap">
<div data-src="images/Battery-Banner.jpg">
I have no idea why it is taking class camera_wrap twice.
Usually JS plugins put dynamic css that is calculated during runtime. It will be placed in inline style tag. Otherwise any static code will go to external css file. Try checking how plugin is calculating that height and than modify your HTML/css.
Try viewing the HTML source in your browser (not using inspect element, use view-source). This will show you the markup prior to any other client side processing aka. JavaScript. If the inline style isn't there when you view source then that indicates that it may be a rogue bit of JavaScript that is adding it in.
In any case can you please provide more information on the issue? Possibly a little more background on what type of website, what parts it has CSS, JS etc. With more information we may be able to help more.
If your source is showing 1 class, and when you are using inspect element it is showing other classes, then it is definitely added by js/jquery plugin.
If you want to overwrite other class css properties, either use !important in your class or use deeper dom traversing like #camera.camera-wrap{}. Than this will be given higher priority. Try which works for you.
I am using a cms system that allows me to write html in a source box, a bit like wordpress. There is a div currently showing on my site that i cannot directly access the html or css of so i am un-able to get rid of it. Is it possible for me to write something with html that will allow me to hide this div ?
You can try using document.addEventListener inside a <script> tag to change the properties of the interested <div> block after the page is completed loaded.
Considering your below line:
.......css of so i am un-able to get rid of it.
lets say id of div is div1 then on the main HTML page which you have access to, add below lines :
<style>
#div1 { display:none }
</style>
Not very sure on this but logically this should work!!
</body>
</html>
visit us
I have wordpress theme with this ahref in ALL pages, can i remove??. I search on all php functions and css style but nothing...any idea?
Thanks for your time!
CSS cannot remove element from DOM. If you know javascript or better jQuery, just give all anchor which you want to remove a specific class then remove it all by using:
$(".yourClass").remove();
If you don't know jQuery, then you need to use the parent of each element to remove it:
element.parentNode.removeChild(element);
Look like you have this tag in footer template, scroll down to check if there is any text written after closing html tag, or sometimes the case may be that your editor does not have wrap text option set as a result you are not able to see this text may be on right side, scroll to right of the editor or alternatively you can use the search option to locate the text.
I want to change background of this 2 link
<a href="http://www.domain.com/index.html">
<a href="http://www.domain.com/index.php">
But condition is I can't add any class or Div id here. I can't touch this this html code also. Just I need to add some css from external. I mean in main style.css sheet. Is is possible ? I have tried with this code a { background:url(../images/image.png);} but problem is it's change the whole link's background of the page. But I want 2 different background of the 2 link. Is is really possible. Anyone can help me please :)
You need to find a way to differentiate the two links, from the code you posted, they only differ in the url they point to, so you could use this:
/* anchors with href attribute ending in index.html */
a[href$='index.html'] { background:url(../images/image.png);}
/* anchors with href attribute ending in index.php */
a[href$='index.php'] { background:url(../images/image2.png);}
You can use CSS attribute selectors to only style links with an href that matches the links you supplied. Example:
a[href="http://www.domain.com/index.html"],
a[href="http://www.domain.com/index.php"]{
background:url(../images/image.png);
}
You could also match all links with an href starting with http://www.domain.com using the following rule
a[href^="http://www.domain.com"]{
background:url(../images/image.png);
}
Please check the support as older browser might ignore attribute selectors.
http://css-tricks.com/attribute-selectors/
I'm attempting to display a mailto link. Is that possible with CSS?
html
<li class="fe footer_no_link"></li>
css
.footer_column .fe:after {content:"info#site.com"; }
you cannot add html elements with the CSS3 ::after or ::before selectors. The content:"" property will only accept plain text.
You must remember that CSS is for styling purposes only. This includes the ::before and ::after selectors.
Your best option is to use a JavaScript alternative.
Your value wasn't appearing because the speech marks needed escaping, or changing:
.fe:after {content:"<a href='mailto:info#site.com'>info#site.com</a>"; }
http://jsfiddle.net/Cb2ry/
Even then though, your content will just display as static text, rather than rendered.
Content added with the pseudo-element doesn't appear in the DOM, so no you can't.
But why do you want to do it with CSS ? It is not styling, the right place seems to be directly on the HTML file.
If the goal is to block spam, I usually use this piece of javascript:
var m;
m='in';
m+='f';
m+='o#exa';
m+='mpl';
m+='e.co';
m+='m';
$ele = document.getElementById('contact-mail');
$ele.href = 'mailto:'+m;
$ele.innerHTML = m;
The mail is splitted to be sure that it doesn't appear as an email in any file.
You can see the result here: http://jsfiddle.net/tzkDt/
This might be useful to someone...
Instead of inserting the link with the css, I coded it into the html with an href & class, but left it empty. Like this:
<p>This text is always here.</p>
<a class="mobile" href="mailto:info#site.com"></a>
.mobile:after {
content:'Click here to email us.'
}
That way the link doesn't appear (height:0, width:0) until it has content.
I used it for a responsive store locator where the map was stacked on top of the location list at small screen sizes, necessitating a link to the list anchor. I considered it a "design" decision, which is the only justifiable reason to do it.
You can't add html to the content in css. Unless you escape everything.
http://jsfiddle.net/PDTng/
Alternatively, you could use jQuery and use .html(), eg:
http://jsfiddle.net/PDTng/1/