Develop Reference

Displaying some HTML for when an <img> can't be shown (instead of the image)

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.

Sub-menu appear on click for that menu item only

I've been looking at this for a while and I'm not sure how to target this.
When I have a menu where the top level menu items have dropdowns, I can write the CSS/JS so that when the button clicks, it shows the dropdown. But when you click one of the buttons, it opens up ALL the dropdowns.
How do I specifically target so that when you click a menu button, it only opens up the sub-menu for that specific button.
<li id="Menu-item-2135" class="menu-item">Menu 1
<ul class="sub-menu">
<li>list item 1</li>
<li>list item 2</li>
</ul></li>
//The JS
$('#menu-item-2135').click(function(){
$('.sub-menu').toggleClass('active');
});
//The CSS
.sub-menu {
display:none;
&.active {
display:flex;
}
}
I have been using the menu item ID to target the menu items and using toggleClass('active') for making the sub-menu appear/hide but this means that anytime I add a new menu item to the site that then has a sub-menu, I had to write the JS for that menu ID. Just wondering if there is a way to tweak this so it does all this without needing to specially write it for every menu ID.

I use .find() to find submenu on clicked element, then , if you need, close all opened submenus before with line $('.menu-item').each((i,e)=>{$(e).find('.sub-menu').removeClass('active')}) if you don't neeed that - just remove
$('.menu-item').each((index,element)=>{
$(element).on('click', ()=>{
$('.menu-item').each((i,e)=>{$(e).find('.sub-menu').removeClass('active')}) // if you need to close other sub-menu
$(element).find('.sub-menu').toggleClass('active')
})
})
.sub-menu {
display:none;
}
.sub-menu.active {
display:flex;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="menu-item">Menu 1
<ul class="sub-menu">
<li>list item 1</li>
<li>list item 2</li>
</ul>
</li>
<li class="menu-item">Menu 2
<ul class="sub-menu">
<li>list item 1</li>
<li>list item 2</li>
</ul>
</li>

How can I put a java script variable into css

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;
}

Jquery slide menu x-scroll issue

I have built a custom slide menu which is giving me a slight bit of grief. Click here for example when you click the menu button, the slide menu pushes the background image to the right and leaves and excess of x-scroll.
My objective for this function is to have sliding menu to sit on top of background image. Currently my background image is an <img> tag and is absolute positioned as the clients wants to update images manually. this maybe the main reason why this issue is occurring. Also the div id="right" is wrapping all the content, including the background image. I have trying placing around with where i wrap the content however i can't figure out a method to make this work correctly i am wondering if there is a way to to work around this Below is a snippet of code, both javascript and HTML structure.
$('#button').toggle(
function() {
$('#right').animate({ left: 400 }, 'slow', function() {
$('#button').html('Close');
});
},
function() {
$('#right').animate({ left: 0 }, 'slow', function() {
$('#button').html('Menu');
});
}
);
<div id="right">
<div id="menubar">
<div id="button">
Menu
</div>
</div>
<div id="menu">
<ul>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
<li>Menu Item 4</li>
<li>Menu Item 5</li>
<li>Menu Item 6</li>
<li>Menu Item 7</li>
<li>Menu Item 8</li>
<li>Menu Item 9</li>
<li>Menu Item 10</li>
<li>Menu Item 11</li>
<li>Menu Item 12</li>
</ul>
</div>
can someone advise me on a way i can solve this issue?

Simpy add :
Body{
overflow-x:hidden;
}
So hide the body-s horizontal scroll.
More information about owerflow.

Collapsed menu, height issue

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.