How to change the displayed image using HTML without JS? - javascript

I wrote the following code:
<div class="slider-button-next slider-btn"> < </div>
<img src="images/pic02.jpg" alt="" data-position="center center" />
<div class="slider-button-prev slider-btn"> > </div>
I want the users to click on the left/right buttons in order to switch between images. Currently I have only one image pic02.jpg. How can I change the image displayed, without JS? (For example, changing to pic03.jpg when pressing right and changing to pic01.jpg when pressing left and so on). I'm planning to use hosting services to host my static website so as I understand, I can't use JS.

If you're careful about where you position your elements you can do this:
#mycheckbox~.images img:first-child {
display: none;
}
#mycheckbox:checked+.images img:last-child {
display: none;
}
#mycheckbox:checked+.images img:first-child {
display: unset;
}
<input id='mycheckbox' type='checkbox'> Click me
<div class='images'>
<img src='https://picsum.photos/id/237/200/300'>
<img src='https://picsum.photos/id/433/200/300'>
</div>
The :has() pseudo class is on it's way (it's not in Firefox yet - check caniuse.com but it's coming) and this allows you lots of flexibilty:
.images img:first-child {
display: none;
}
body:has(#mycheckbox:checked) .images img:last-child {
display: none;
}
body:has(#mycheckbox:checked) .images img:first-child {
display: unset;
}
<input id='mycheckbox' type='checkbox'> Click me
<p> Lots of content here</p>
<div class='images'>
<img src='https://picsum.photos/id/237/200/300'>
<img src='https://picsum.photos/id/433/200/300'>
</div>
You'd have to look at your slider element to see how it's been rendered in the DOM to see if it's an underlying check box or other input and change the rules accordingly.

Related

Add text to a popup image only

I'm using this free HTML template https://html5up.net/ethereal
In the portfolio section, when you click on an image, the image appears bigger for a better view.
I want to add some info or some text along with the popup image but somehow cannot add it to this code
<img src="https://html5up.net/uploads/demos/ethereal/images/gallery/thumbs/01.jpg" alt="" />
Edit based on your comments: There are many approaches to toggling hidden content, below you will find a basic example. We are hiding the element with the class "hidden" and wiring up an event listener on the default image. Once the default image is clicked on it will fire a function that gets the parent element and applies a new class. In our CSS we are then hiding the default image and showing the previously hidden content. This is a rough example and by expanding on the styling you can do all sorts of things such as fading the hidden content in by setting a transition on the element's opacity or sliding the hidden content into view by transitioning the transform properties as a couple of examples.
var target = document.querySelector(".parent .default");
target.addEventListener("click", function(){
var parent = document.querySelector(".parent");
parent.classList.add("show-hidden");
});
.parent {
padding: 15px;
}
.parent p {
color: black;
font-size: 16px;
}
.hidden {
display: none;
}
.parent.show-hidden .hidden {
display: block
}
.parent.show-hidden .default {
display: none;
}
<div class="parent">
<img class="default" src="https://html5up.net/uploads/demos/ethereal/images/gallery/thumbs/01.jpg" alt="" />
<div class="hidden">
<img src="https://html5up.net/uploads/demos/ethereal/images/gallery/thumbs/01.jpg" alt="" />
<p>I am the text element</p>
</div>
</div>

JS: Adding style dependent on class exist in siblings child

I've had a look at related answers but none are what I am looking for... I think. Apologies if I am duplicating a question.
This HTML is used many times on a page, within a product box and is displayed on a product category page.
<div class"all-buttons-container">
<div class="button1-container">
<a class="button1">text</a>
</div>
<div class="button2-container">
<a class="button2 **hidden**">text</a>
</div>
</div>
In this (much simplified) HTML I have a container which houses 2 siblings.
- Each sibling contains an anchor.
The button containers are always visible.
Sometimes, the .button2 anchor also has the bootstrap class of hidden so the anchor is no longer displayed. This is done in each of the product boxes depending on the need to have the second button for that product. I am not in control of this.
When the .button2 anchor has the hidden class I need to add some margin-top to button1-container to vertically center it
I was going to use pure style (flexbox) but it wasn't achieving what I needed.
I would like to run a little jQuery or pure JS every time the page finishes loading which adds some the top margin, if required, on each instance of this HTML. I don't like having to do this but will need to if I cannot find another simple way of controlling it.
Any thoughts... solutions... perfect solutions etc?
Thanks in advance!
cheers
wayjo
I suppose I've fully understood your question.
You can achieve this without JS, in a cleaner any.
Why not make a custom class of button2-hidden and attach it to all-buttons-container?
<div class"all-buttons-container button2-hidden">
<div class="button1-container">
<a class="button1">text</a>
</div>
<div class="button2-container">
<a class="button2">text</a>
</div>
</div>
Then you have this CSS:
.button2-hidden .button2-container{
display: none; // or visibility -- whatever you want
}
.button2-hidden .button1-container{
margin-top: 1rem;
}
If you can add a div to contain the buttons, than you can use the snippet below:
.all-buttons-container{
display: flex; /* important part */
align-items: center; /* important part */
padding: 10px;
background-color: grey;
width: 200px;
border: 2px solid #fff;
height: 150px;
}
.hidden {
display: none!important;
}
.all-buttons-container > div a{
display: inline-block;
background-color: blue;
padding: 7px;
margin: 7px;
color: #fff;
}
<div class="all-buttons-container">
<div class="very-important-div">
<div class="button1-container">
<a class="button1">button1</a>
</div>
<div class="button2-container">
<a class="button2">button2</a>
</div>
</div>
</div>
<div class="all-buttons-container">
<div class="very-important-div">
<div class="button1-container">
<a class="button1">button1</a>
</div>
<div class="button2-container">
<a class="button2 hidden">button2</a>
</div>
</div>
</div>
<div class="all-buttons-container">
<div class="very-important-div">
<div class="button1-container">
<a class="button1 hidden">button1</a>
</div>
<div class="button2-container">
<a class="button2">button2</a>
</div>
</div>
</div>

Hiding/unhiding an element in HTML with internal page references

Would it be possible to have the internal page reference hide/unhide an element.
<div class="hidden">
<div id="thanks">
<h1>Thank you!</h1>
<p></p>
</div>
</div>
So you would visit "http://www.website.com/#thanks" and the div "hidden" would be hidden / vice versa
Yes, using the :target pseudo class.
#main {
display: none;
}
#main:target {
display: block;
}
main
<div id="main">
main section
</div>
Alternatively, you can nest hidden content inside of the :target like this.
.hidden {
display: none;
}
:target .hidden {
display: block;
}
main
<div id="main">
<div class="hidden">
main section
</div>
</div>
You can use the following JavaScript to get the value after hash (#) from a URL.
var hash = location.hash.substr(1);
You can then hide/unhide based on the results.

Get the image to appear larger with moving my other elements on my page

Here is the exact thing i've got to do:
Appropriate JavaScript and html so that when the user moves the mouse
over a thumbnail image of one particular type of room that is on
special offer, a full size (larger) image relating to it is displayed
(note that the display of a larger image should not cause other page
elements to move). When the user moves the mouse away from the
thumbnail image, the larger image should disappear.
Here is my website.
I just want to be able to hover over those image and get them to appear above the page, without altering how the page looks now.
This is my javascript section at the moment;
div = {
show: function(elem) {
document.getElementById(elem).style.visibility = 'visible';
},
hide: function(elem) {
document.getElementById(elem).style.visibility = 'hidden';
}
}
But i'm unsure if that is right or now for what i want,
Then this is the html;
<img src="images/garden2.jpg" width="201" height="143" alt="Garden Room" onMouseOver="div.show('div1')" onMouseOut="div.hide('div1')"/>
<div id="div1"><img src="images/garden2.jpg" alt="Garden Room" /></div>
but that creates a div below the image and alters the my elements which is not what i want to happen.
If you want some element to appear over other elements this element need to be positioned - the best way in your case is to set all containers element - meaning elements that contains the original shown image and the hidden image - in style position relative - and the hidden image set absolute position and when you hover on the original image just show the hidden image as your coded already:
I made a simple jsfiddle for you to understand
html:
<div class="container">
<img src="http://www.numyspace.co.uk/~unn_w12001251/images/fellside22.jpg" onMouseOver="div.show('div1')" onMouseOut="div.hide('div1')" />
<div id="div1" class="hid-img"><img src="http://www.numyspace.co.uk/~unn_w12001251/images/fellside22.jpg" /></div>
<div>
<div class="container">
<img src="http://www.numyspace.co.uk/~unn_w12001251/images/garden2.jpg" onMouseOver="div.show('div2')" onMouseOut="div.hide('div2')" />
<div id="div2" class="hid-img"><img src="http://www.numyspace.co.uk/~unn_w12001251/images/garden2.jpg" /></div>
<div>
css:
.container{
position: relative;
}
.container .hid-img{
position: absolute;
display:none;
z-index:1;
}
js:
var div = {
show: function(elem) {
document.getElementById(elem).style.display = 'block';
},
hide: function(elem) {
document.getElementById(elem).style.display = 'none';
}
}
EDIT:
just add width,height to img tag http://jsfiddle.net/MKPgv/2/
I would use a simpler code like this:
HTML:
<a href="http://www.numyspace.co.uk/~unn_w12001251/images/fellside22.jpg">
<img width="100" src="http://www.numyspace.co.uk/~unn_w12001251/images/fellside22.jpg" />
<img class="fullsize" src="http://www.numyspace.co.uk/~unn_w12001251/images/fellside22.jpg" />
</a>
<a href="http://www.numyspace.co.uk/~unn_w12001251/images/garden2.jpg">
<img width="100" src="http://www.numyspace.co.uk/~unn_w12001251/images/garden2.jpg" />
<img class="fullsize" src="http://www.numyspace.co.uk/~unn_w12001251/images/garden2.jpg" />
</a>
CSS:
a {
position: relative;
display: inline-block;
}
a .fullsize {
position: absolute;
top: 100%;
left: 0;
display: none;
z-index: 1;
}
a:hover .fullsize {
display: inline;
}
JS:
-NONE-
Fiddle: http://jsfiddle.net/84anu/
Preview http://jsfiddle.net/84anu/show/

repositioning a <p> from a jQueryUI dialog to centerstage for CSS Print

I'm using a jQueryUI Dialog command to popup a <p> and wish to print just the text of the <p> using the media="print" declarative
html code::
<div class="jPajxDialog">
<p class="print">
Some Text
</p>
<div>
I have tried:
CSS code::
#charset "UTF-8";
body {visibility:hidden;}
.print {visibility:visible;}
.noprint {visibility: hidden;}
p.print {
position: absolute;
margin: 15px auto;
}
To hide something when printing, you should use "display: none" in css. Just keep in mind that if you make a parent "display: none", all of his children will also NOT be displayed, even if you did a "display: block;" on the child.
You might want to review your html structure so that pieces of information that you want to hide will not be a parent of what you want to keep, that is if you want to have a cross browser compatible solution.
For example,
<div>
<div class="noprint"> Site header </div>
<div>
<div class="noprint"> Site menu </div>
<div class="print"> the content you wish to print </div>
<div class="noprint"> Site footer </div>
</div>
</div>
and css media="print"
.noprint { display: none; }
.print { display: block; }

Categories