I am using it in a drop down menu system. on mouse hover on a link the image of a parent div got switched and on mouse out it reverts the image. this variable I am using in html. Is there a way I can put this variable in my css sheet and call through an id or class?
In <li> tag you can see the mouseover and mouseout, I want to give an class ot id to call this variable.
This is my html
<div onmouseover="changeImage(fashionSrc)" onmouseout="changeImage(fashionSrc1)">
<h3>Casuals</h3>
</div>
<ul>
<li onmouseover="changeImage(fashionSrc2)" onmouseout="changeImage(fashionSrc1)">Menu 1</li>
<li onmouseover="changeImage(fashionSrc3)" onmouseout="changeImage(fashionSrc1)">Menu 2</li>
<li onmouseover="changeImage(fashionSrc4)" onmouseout="changeImage(fashionSrc1)">Menu 3</li>
<li onmouseover="changeImage(fashionSrc5)" onmouseout="changeImage(fashionSrc1)">Menu 4</li>
<li onmouseover="changeImage(fashionSrc6)" onmouseout="changeImage(fashionSrc1)">Menu 5</li>
<li onmouseover="changeImage(fashionSrc7)" onmouseout="changeImage(fashionSrc1)">Menu 6</li>
</ul>
onMouseOver = "this.src="../your_path/image1.png"; //or anything else
onMouseOut = "this.src="../your_path/image2.png"; //or anything else
Consider unobstrusive javascript, link 1 link 2
Is there a way I can put this variable in my css sheet and call
through an id or class?
No afaik. What you can do is modify the element's class and define those in your CSS. You should use the :hover pseudo-class instead of JS tricks in this case anyway.
Here is the simple way to create a menu with drop-down. try this.
HTML like this.
<div class="drop-down">
<h2></h2>
<ul>
<li>Menu 1</li>
...
</ul>
</div>
Style like this.
.drop-down {
position:relative;
height:40px;
}
.drop-down h2 {
... //Some style for heading
}
.drop-down ul{
display:none;
position:absolute;
top:40px; // Equal to drop-down height;
left:0;
}
//Display the submenu, when hover
.drop-down:hover ul {
display:block;
}
Related
I want to change the color of a list tags but I can only use inline style, any idea how to do it once, insted of writing inline style for each li tags. (No JS or Style tags)
Most of the answers currently here use JS or the style tag.
The secret is that if you just want to change the text color, all you have to do is add that property to the parent element one time and it will apply to all of them.
This can be done either to the ul tag, or you can surround all of the li tags that you want to update with a span tag and change the inline style color property of that (this is usually how it's done).
Try this
<ul>
<li style="color: red;">Item 01</li>
<li style="color: green;">Item 02</li>
</ul>
You can also use hex color codes as well.
<ul>
<li style="color: #ff0000;">Item 01</li>
<li style="color: #00ff00;">Item 02</li>
</ul>
Without writing each line of li tags, you can wrap your li tags within ul tag and add style for ul tag like this.
<ul style="color: #ff0000;">
<li>Item 01</li>
<li>Item 02</li>
</ul>
You can use the CSS color property.
<ul>
<li style="color: red;">red li item</li>
<li style="color: green;">green li item</li>
<li style="color: blue;">blue li item</li>
</ul>
in your style tag, select li
<style>
li{
color:red;
}
</style>
I happen to have a stylized image with a list inside it in some HTML page.
If the image cannot be shown, I want to have a normal HTML list instead of it (in a similar vein to an alt text, but with HTML tags and not just text).
Is there a best way to do that? (like a CSS rule or something?)
Thanks
There is a standard way to do this without resorting to JavaScript. Use the object element instead of the img element. If the image can't be displayed, the content of the object element is used. So:
<p>When the image displays:</p>
<object data="https://via.placeholder.com/50" style="height:50px">
<ul>
<li>list item 1</li>
<li>list item 2</li>
</ul>
</object>
<p>When the image doesn't display:</p>
<object data="https://error.placeholder.com/50" style="height:50px">
<ul>
<li>list item 1</li>
<li>list item 2</li>
</ul>
</object>
You can listen for the error event, which fires when the resource can't be loaded:
function badImage(imageElement){
imageElement.outerHTML = "This image can't be shown"
}
<img src="https://.com" onerror="badImage(this)">
the list is overlaped by the image normaly. if the image has an error loading, it will become invisible.
not 100% sure if it will work though.
css:
img {
z-index: 1;
position: absolute;
top:0px;
left:0px;
}
ul {
/*z-index: 0;*/
position: absolute;
top:0px;
left:0px;
}
html:
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
<img src="image.jpg" onerror="document.querySelector('img').style.visibility = "hidden"">
you can style the list however you like.
I'm using a ul with several child lis for navigation with html/javascript and css. Problem is, on tapping, it selects the Menu1 text (like it would when you want to copy text), while opening the menu. Using Windows 8, ie11, on surface tablet. I don't want the text selected, how can I stop this?
<ul id="nav" class="dropdown dropdown-horizontal">
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
<li aria-haspopup="true" style="cursor:pointer"><span class="dir">Menu1</span>
<ul>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
</ul>
</li>
</ul>
Maybe try something like this:
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
And then CSS
li {
position:relative;
}
li > a {
position:absolute;
display:block;
height:100%;
top:0;
left:0;
z-index:2;
}
This would put the anchor on top of the text, thereby making it clickable but not allowing the text to be copyable.
This should be pretty simple. Basically when an item in a list is clicked that text is inserted/replaced into a target div. 'replaceWith' is probably not the thing to use because it deletes the original data.
Also how do you add the class of 'selected' to the text in the target div.
Anyway here is what I have so far: http://jsfiddle.net/BM8Cb/
HTML
<div class="selected" id="here">
<li>All</li>
</div>
<hr>
<ul>
<li>All</li>
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
</ul>
CSS
ul {list-style:none;padding:0; margin:0;}
li {cursor:pointer;}
li:hover {color:red;}
.selected {color:red;}
JS
$("li").click(function() {
$("#here").replaceWith(this);
});
Thank you for any help
What about
$("li.item").click(function() {
$("#here").html($(this).html());
});
If all you need is the text.
using replaceWith will replace the DOM node so it's no longer there the next time you try. You need to use append
$("#here").append(this);
and By using 'this' you are copy everything include the event handler. if you want just the text you can do something like
$("#here").append(this.innerHTML);
Change your JS to:
$("li.item").click(function() {
var item = $(this).clone();
item.attr("class","selected");
$(".selected").append(item)
$(this).hide();
});
Here's the fiddle: http://jsfiddle.net/J7JST/2/
This will also add the selected class to your item
I'm currently setting up a menu including sub menu, built on Wordpress categories. Basically, I'm retrieving all the top level categories, and then build a submenu on each, with all the posts from that parent category.
So the structure looks like this :
<ul class="menuCat">
<li> lifestyle
<ul class="show-hide">
<li>Article #7</li>
<li>Article #5</li>
<li>Article #3</li>
</ul>
</li>
<li> musique
<ul class="show-hide">
<li>Article #8</li>
<li>Article #7</li>
<li>Article #2</li>
<li>Article #1</li>
<li>Article #3</li>
</ul>
</li>
</ul>
<div id="content">...
The sub menus are set to display:none. When a category gets clicked, the submenu ul appears (using jQuery toggle) under the main menu. I'm running it locally so I can't give you a live example, but the way it works is the same as when you hit the "categories" link here : http://wpshower.com/demo/?theme=imbalance.
My problem is that with this structure and for what I want to visually achieve (c.f previous url), I don't see any other option that putting the submenu block in an absolute position. But if I do so, I need to push the rest of the content down, when a menu is triggered. What I've tried so far, is to set a margin-top based on the height of the currently viewed submenu. Unfortunately, neither height or outerHeight could help me...
Any ideas ?
Thanks!
Can you go into more detail about why you need to position absolute? Looks to me like you could achieve what you want by having all your submenus statically positioned below the top level menu, using jQuery to ensure only one is shown at a time.
By having them statically positioned the submenu will push the content below it down when it expands, and as long as all but one submenu is always set to display: none; you won't even know it's there.
For this to work however, you'll need to change the structure of your html though. The submenu items will need to be in a div below the top level menu list, not within it.
<ul class="menuCat">
<li> lifestyle
</li>
<li> musique
</li>
</ul>
<div id="submenu-container">
<ul class="show-hide lifestyle">
<li>Article #7</li>
<li>Article #5</li>
<li>Article #3</li>
</ul>
<ul class="show-hide musique">
<li>Article #8</li>
<li>Article #7</li>
<li>Article #2</li>
<li>Article #1</li>
<li>Article #3</li>
</ul>
</div>
<div id="content"></div>
$(function () {
$('.menuCat > li').click(function (e) {
var target = $('.show-hide.' + e.target.title);
$('.show-hide').not(target).hide();
target.toggle();
});
});
ul.menuCat li {
display:inline-block;
vertical-align: top;
}
ul.show-hide {
display: none;
background-color:lightgrey;
}
#content {
height: 200px;
width: 100%;
background-color: red;
}
For an example see this demo: http://jsfiddle.net/ijoukov/PCgxR/
Some news, I think I can't modify the HTML structure because the submenus are built in the same time as the parent list-item, within the 'start_el' wordpress function. That function gets called for each category link in the menu.