I'm currently trying to replace the text of a div and add a link to it. Basically I don't have the ability to directly modify a text so what I'm doing is modify that text with the ::after property, and I would like to link the new 'copy' that I'm replacing so that it takes you to another page. Here's my code:
<div class="category-name">
<span itemprop="productname" data-masterid="03324">Blue Male T-shirt</span>
</div>
and here's the CSS I'm using to change the text 'Blue Male T-shirt:
.category-name {
visibility: hidden;
}
.category-name::after {
content:'Electric Blue Tee';
visibility: visible;
display: block;
padding: 5px;
border: none !important;
text-transform: capitalize;
font-size: 12px;
}
Now, I've found a script to add to make the after property a link, but I can't seem to be able to make it work:
<script>
jQuery('.category-name::after').each(function() {
var link = $(this).html();
jQuery(this).contents().wrap('');
});
</script>
Does anybody know what I'm putting wrong? Any help would be highly appreciated!
Thanks in advance :)
You cannot wrap pseudo-elements in HTML tags. The most you can do is wrap the span element inside the .category-name element in the a tag.
jQuery('.category-name > span').each(function() {
jQuery(this).wrap('');
});
Related
How to always display the alt attribute of an anchor tag in HTML?
Here is a situation where I have multiple repeating grids and I want to identify with date.
So i want to show the title always, how can I achieve this?
see details
see details
see details
Here is a demo: https://jsfiddle.net/wub5y96d/1/
You can output the content of an element's attribute using content: attr(attribute); on either of the pseudo elements ::after or ::before, like this:
a[title]::after {
content: ' ('attr(title)')';
}
Demo
try this simple loop
$('a').each(function(){
var text = $(this).text();
var title = $(this).attr('title');
$(this).text(text+'-'+title);
});
Why do people keep using Fiddle's. When Snippets will work just as fine.. :)
You can run them directly inside SO, how cool is that. Oh, well maybe it's just me..
a::after {
position: absolute;
top: 16px;
left: 0px;
width: 200px;
color: silver;
content: attr(data-created);
font-size: smaller;
}
a {
position:relative;
display:inline-block;
height: 30px;
}
<div>
see details
</div>
<div>
see details
</div>
I am working on a piece of legacy code for a table. In certain cells, I'm adding a notice icon. When you hover over the icon a <span> is made visible displaying some information. I would like to be able to make this <span> smart about its positioning but can't figure out a good method. I can statically position it but depending on which cell in the table it is in it gets lost against the edge of the page. I have done a JsFiddle here demonstrating the issue. Unfortunately, I am not allowed to use anything but HTML, CSS and vanilla JS.
The title attribute to most tags is pretty smart about its position. I have added a title to one of the cells in the table in the jsFiddle (cell containing "Hello"). Is there any way to make my span exhibit the same smart behaviour?
A pop-up can be added before any element by putting the popup html code inside a 'div' with 'position:absolute; overflow:visible; width:0; height:0'.
When these events: 'onmouseenter', 'onmouseleave' are fired on the element, just toggle the popup css attribute 'display' between 'none' and 'block' of the element.
Example on jsfiddle:
https://jsfiddle.net/johnlowvale/mfLhw266/
HTML and JS:
<div class="popup-holder">
<div class="popup" id="popup-box">Some content</div>
</div>
Some link
<script>
function show_popup() {
var e = $("#popup-box");
e.css("display", "block");
}
function hide_popup() {
var e = $("#popup-box");
e.css("display", "none");
}
</script>
CSS:
.popup-holder {
position: absolute;
overflow: visible;
width: 0;
height: 0;
}
.popup {
background-color: white;
border: 1px solid black;
padding: 10px;
border-radius: 10px;
position: relative;
top: 20px;
width: 300px;
display: none;
}
Update: Fixed and working. Thanks everyone for the help.
Hello I'm making a javascript/jQuery button that when its clicked, a Div appears (display: inline-block), and when its clicked again the Div goes back to display: none. Ideally I would want to animate the movement, but I really just want to get it working first.
My button...
<button> Menu Test </button>
My function (updated)...
<script>
$("button").click(function(){
$("#flexMenu").toggle("slow", function() {
});
});
</script>
The CSS for flexMenu...
#flexMenu {
/* display: inline-block;*/
position: fixed;
float: left;
background: #1f1f1f;
margin: 3.9em 0 0 0;
padding: .25em;
width: 15%;
height: 6em;
border: 2px solid #fff;
z-index: 100;
}
I'm really just to sure how to grab the display property of the ID and change it. I've done a hover function before using CSS ease-out to make divs grow in size when hovered and change class by using $(this).toggleClass(nameOfClass), but I have never tried just changing an element. The other questions like this didn't really fit just changing the display value. Thanks for any help.
you should use jquery :
$("button").click(function(){
$("#flexMenu").toggle();
});
Updated with the jQuery .on() method which allows you to bind specific events to that button (event listeners).
$("button").on('click', function () {
$('#flexMenu').toggle("slow");
});
Fiddle
I have a label where if you hover over it, it should expand the length of the text inside. I would like to slide the div next to it the width of the label (depending on the length of the word). Here is the JS Fiddle: http://jsfiddle.net/5s69j/1/
I want to use the .length to slide the div next to it because I don't want to hardcode it.
I ultimately want to have the title div visible at all times if there is a label or not. If there IS a label then I want the title to be to the right of the label at all times. If there ISN'T a label then I don't want space before the title, which is why I'm not using margin.
Here I'm trying to set a hover function on the labels to slide the title the length of label. And I think that I need something to calculate the length of a string. Let me know if I'm missing something obvious.
$(function(){
var stuff = $(".labels").length;
$('.labels').hover(function{
$(".title").slideToggle(stuff, function() {
});
});
});
Thank you so much!
Check this, here is solution without js
HTML
<div class="labels">
<div class="new"></div>
<div class="firstlabel">label label</div>
</div>
<div class="title">title goes here</div>`
* {
transition: all .5s ease;
}
.labels {
float: left;
overflow: hidden;
max-width: 20px;
color: #7cbf50;
background-color: #7cbf50;
}
.firstlabel {
white-space: nowrap;+
}
.labels:hover {
max-width: 500px;
}
.labels:hover .firstlabel {
color: #fff;
}
or see the following
http://jsfiddle.net/5s69j/8
JSFiddle - let me know if you want anything changed. You just needed to have them display: inline-block; and remove the absolute positioning.
DEMO Check this.
display:inline-block
Use the above. It ll solve your problem
I'm trying to add a checkbox toggle that hides and shows list elements by changing their style display attribute from "none" to "inline", but it's not working. I'm setting the attribute's style to "display:none" in the CSS file. Then I set it to "display:inline" in javascript when someone checks a box. The javascript is successfully changing the element's property to inline, but for some reason the element remains invisible.
If I do the opposite, by setting the display to inline in the CSS and overriding it to none in the javascript, it works fine. I don't see why this would work one way but not the other.
I'm using chrome. Here is the code. Any feedback is appreciated.
CSS file:
#tabmenu li[status='disabled'] a, a.active, #disabled {
color: #777777;
background: #DDDDDD;
font: normal 1em Arial;
border: 1px solid black;
border-radius: inherit;
padding: 0px 5px 0px 5px;
margin: 0px;
text-decoration: none;
cursor:hand;
display:none;
}
HTML:
<ul id="tabmenu">
<li name='tab' id='tab1' selected='no' status='disabled'></li>
</ul>
JAVASCRIPT (from command line, or onchange of a checkbox)
tab = document.getElementById('tab1');
tab.style.display = 'inline';
UPDATE: I know that I could just move the "display: none" out of the css and have it set to none on page load with javascript. But if I do it that way, it will be hiding them after page load, which means, on slower computers, the user could see them flash briefly into visibility. That's why I'm using css to set the initial state, then trying to override it when the box is checked or unchecked.
UPDATE 2: Let me emphasize that if I set the element to visible in css, then hide it on change of the check box, this code works fine. But if the element is initially set to invisible in css, the checkbox is not able to make the element visible. So it appears to be a problem where css "display: none" can't be overridden after page load, but css "display: inline" can.
Your CSS is hiding an a element within the tab, not the tab itself:
#tabmenu li[status='disabled'] a {
}
Changing the tab's style won't undo that.
If your CSS was instead:
#tabmenu li[status='disabled'], a.active, #disabled {
...
}
then changing the display would be useful.
You've set the a element inside the li to be hidden, so setting the tab to be visible isn't enough. Setting the container (the li) visible won't make the content (the a) visible.
You probably want to change your rule to
#tabmenu li[status='disabled'], a.active, #disabled {
CSS targets <a> tags hidden, javascript is changing an <li>, the child <a> would still be hidden
you should have function that will check state of a checkbox I've added it to markup
<ul id="tabmenu">
<li name='tab' id='tab1' selected='no' status='disabled'>some text</li>
</ul>
<label>
<input type="checkbox" id="check"/>show text
</label>
Then next code will check the state of your checkbox and will change visibility of tab
$(function () { //document ready
$('#check').click(display); //onclick checkbox display() will be performed, do not use onchange as you'll get in troubles with IE
function display(){
tab=document.getElementById('tab1');
checkbox=document.getElementById('check')
if (check.checked){
tab.style.display = 'inline';
}
else{
tab.style.display='none';
}
console.log(tab.style.display)
}
});
Or try to play here http://jsfiddle.net/766Nb/
P.s: on jsfiddle I've cleaned up css a bit
For hidde element li you need tab.style.display='none'; and for show element li you need tab.style.display='list-item';.
Then the necessary code it's this:
JAVASCRIPT
function llm()
{
tab = document.getElementById('tab1');
if (document.getElementById('Check1').checked==false)
{
tab.style.display = 'none';
}
else
{
tab.style.display='list-item';
}
}
HTML
<input type="checkbox" id="Check1" name="vehicle" value="Car" onclick="LLM();"> Checked
<ul id="tabmenu">
<li name='tab' id='tab1' selected='no' status='disabled'></li>
</ul>
CSS
#tabmenu li[status='disabled'] a, a.active, #disabled {
color: #777777;
background: #DDDDDD;
font: normal 1em Arial;
border: 1px solid black;
border-radius: inherit;
padding: 0px 5px 0px 5px;
margin: 0px;
text-decoration: none;
cursor:hand;
display:none;
}
I think it's not possible to do only with css. If you need more help notify me.
Look this way, maybe you can solve your problem using these steps:
Create a .visible class on the css with this code:
.visible {
display: inline !important;
}
And create another class .hidden:
.hidden {
display: none !important;
}
And then, use this code to Hide your element:
tab = document.getElementById('tab1');
tab.className = 'hidden';
And this code to Show your element:
tab = document.getElementById('tab1');
tab.className = 'visible';
Important: with this solution you can start with display:none on the CSS without having problems to set visible after, because the !important tag on the classes overwrite all, so you will not have problem to hide it.