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.
Related
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.
I'm new in programming.
I have multiple sibling divs with the same class and a view more button.
I want to add class to the div on the view more button click, but one by one.
So the first sibling-div will be visible and view more button.
When a user clicks on the button the second sibling-div should be visible, then on clicking again the third sibling-div should be visible and so on.
I don't have access to html so i used jQuery to add the view more button.
I have used CSS to hide all the sibling divs by default. Only the first div, view-more-btn button and when there's active class they will be visible.
I've tried to add class using jQuery but it adds to all the divs.
This is the html
<div class="parent-div">
<div class="sibling-div">
/*content*/
</div>
<div class="sibling-div">
/*content*/
</div>
<div class="sibling-div">
/*content*/
</div>
<div class="sibling-div">
/*content*/
</div>
<div class="sibling-div view-more">
<a class="view-more-btn">View More</a>
</div>
</div>
This is my CSS
.parent-div .sibling-div{
display: none;
}
.parent-div .sibling-div:first-child, .parent-div .sibling-div.active, .parent-div .sibling-div.view-more{
display: block;
}
This is my jQuery
$(document).ready(function(){
var view_more = '<div class="sibling-div view-more"><a class="view-more-btn">View more</a></div>';
$(".parent-div .sibling-div:last-child").after(view_more);
$(".parent-div .view-more-btn").click(function(){
/*Adds class to all sibling divs*/
$(".parent-div .sibling-div").addClass("active");
/*Also tried*/
$(".parent-div .sibling-div:first-child").next().addClass("active");
/*But it only adds class to the second sibling*/
/*Also tried using loop*/
var div_length = $(".parent-div .sibling-div").length();
for(i=0; i <= div_length; i++){
$(".parent-div .sibling-div").addClass("active");
}
});
});
I've tried all this methods but it doesn't work the way I want.
It adds class to all the sibling-div, or just the second sibling-div
You can access the next hidden element in the group with
$(".parent-div .sibling-div:hidden:first")
:hidden targets elements with no opacity or display:none.
:first is a jQuery selector that targets the first item of the match.
$(document).ready(function() {
$('.parent-div').append('<div class="" view-more"><a class="view-more-btn" href="#">View more</a></div>');
$(".parent-div .view-more-btn").click(function() {
$(".parent-div .sibling-div:hidden:first").addClass("active");
});
});
.parent-div .sibling-div {
display: none;
}
.parent-div .sibling-div:first-child,
.parent-div .sibling-div.active,
.parent-div .sibling-div.view-more {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent-div">
<div class="sibling-div">
/*content*/
</div>
<div class="sibling-div">
/*content*/
</div>
<div class="sibling-div">
/*content*/
</div>
<div class="sibling-div">
/*content*/
</div>
</div>
I recommend to just add an id in each <div id="div-1" class="sibling-div"> for the purpose of accuracy whatever you do in that div.
I'm starting out with divs arranged the following way. Two divs, main-top and main-bottom start out hidden and I want them to appear after they've been moved into the right spot. I want to move main-top to appear after header, and move main-bottom to appear before footer, and after they're moved, show the divs. How do you move these divs with jQuery? The final order should be header, main-top, main-bottom, footer
<div id='main'>
<div id='main-top'>Main Top</div>
<div id='main-bottom'>Main Bottom</div>
<div id='header'>Header</div>
<div id='footer'>Footer</div>
</div>
<style>
#main-top {display: none;}
#main-bottom {display: none;}
<style>
<script>
//*Move 'main-top' to appear after 'header'*
$('#main-top').show(); // Show div after it's moved
//*Move 'main-bottom' to appear before 'footer'*
$('#main-bottom').show(); // Show div after it's moved
</script>
You can use insertBefore and insertAfter funstions
$('#main-top').insertAfter('#header').show();
$('#main-bottom').insertBefore('#footer').show();
#main-top {display: none;}
#main-bottom {display: none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='main'>
<div id='main-top'>Main Top</div>
<div id='main-bottom'>Main Bottom</div>
<div id='header'>Header</div>
<div id='footer'>Footer</div>
</div>
This problem can be solved in a couple of ways, one way – with caveats – using CSS (with either CSS flex-box or Grid layouts) and another with JavaScript/jQuery.
First, with CSS flexbox:
/* we use flexbox layout on the element which
contains the elements you wish to rearrange,
which causes them to become flex-items, and
this allows us to use the 'order' property
to visually arrange them: */
#main {
display: flex;
flex-direction: column;
}
/* here we select the elements and use the
'order' property with a numerical value
to place them in the correct order within
their parent element: */
#header {
order: 1;
}
#main-top {
order: 2;
}
#main-bottom {
order: 3;
}
#footer {
order: 4;
}
<div id='main'>
<div id='main-top'>Main Top</div>
<div id='main-bottom'>Main Bottom</div>
<div id='header'>Header</div>
<div id='footer'>Footer</div>
</div>
and, with CSS Grid:
/* we use grid layout on the element which
contains the elements you wish to rearrange,
which causes them to become grid-items, and
this allows us to use the 'order' property
to visually arrange them: */
#main {
display: grid;
grid-auto-flow: row;
}
/* here we select the elements and use the
'order' property with a numerical value
to place them in the correct order within
their parent element: */
#header {
order: 1;
}
#main-top {
order: 2;
}
#main-bottom {
order: 3;
}
#footer {
order: 4;
}
<div id='main'>
<div id='main-top'>Main Top</div>
<div id='main-bottom'>Main Bottom</div>
<div id='header'>Header</div>
<div id='footer'>Footer</div>
</div>
There's a third CSS approach, again using CSS Grid layout, but taking advantage of the grid-template-areas and grid-area properties:
/* we use flexbox layout on the element which
contains the elements you wish to rearrange,
which causes them to become flex-items, and
this allows us to use the 'order' property
to visually arrange them: */
#main {
display: grid;
/* here we name several grid areas; each quoted string
names the areas in that row, here we have four named
rows and each row has only one column: */
grid-template-areas:
"header"
"main-top"
"main-bottom"
"footer";
}
/* here we select the elements and use the
'grid-area' property to place them each
in the correct grid-area: */
#header {
grid-area: header;
}
#main-top {
grid-area: main-top;
}
#main-bottom {
grid-area: main-bottom;
}
#footer {
grid-area: footer;
}
<div id='main'>
<div id='main-top'>Main Top</div>
<div id='main-bottom'>Main Bottom</div>
<div id='header'>Header</div>
<div id='footer'>Footer</div>
</div>
The caveat of these approaches is that they affect only the visual presentation; the DOM is untouched and the positioned elements – whether using order or grid-area – remain in their original order for those users using alternative means of consumption (such as screen-readers).
Using native JavaScript, which does modify the DOM order:
// we retrieve, and cache, the <div id="header"> element,
// and then its parentNode:
const header = document.getElementById('header'),
parent = header.parentNode;
// here we use the parentNode.insertBefore() method to
// place the 'header' before the 'parent' Node's
// first-child:
parent.insertBefore(header, parent.firstChild);
#main-top,
#main-bottom {
display: none;
}
#header+#main-top,
#header+#main-top+#main-bottom {
display: block;
}
<div id='main'>
<div id='main-top'>Main Top</div>
<div id='main-bottom'>Main Bottom</div>
<div id='header'>Header</div>
<div id='footer'>Footer</div>
</div>
This is functionally equivalent to your request, however your question specifically asks about:
moving the #main-top element after the #header element, and
moving the #main-bottom element before the #footer element.
With this in mind, if you really wish to move two elements instead of just the one, then the following should address your need in relation to the elements you wish to position alongside:
// retrieving and caching all elements using destructuring assigment:
const [parent, mainTop, mainBottom, header, footer] = document.querySelectorAll('div');
parent.insertBefore(mainTop, header.nextSibling);
parent.insertBefore(mainBottom, footer);
#main-top,
#main-bottom {
display: none;
}
#header+#main-top,
#header+#main-top+#main-bottom {
display: block;
}
<div id='main'>
<div id='main-top'>Main Top</div>
<div id='main-bottom'>Main Bottom</div>
<div id='header'>Header</div>
<div id='footer'>Footer</div>
</div>
Finally, of course, using jQuery if you wish to do so:
$('#header').after($('#main-top'));
$('#footer').before($('#footer'));
#main-top,
#main-bottom {
display: none;
}
#header+#main-top,
#header+#main-top+#main-bottom {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='main'>
<div id='main-top'>Main Top</div>
<div id='main-bottom'>Main Bottom</div>
<div id='header'>Header</div>
<div id='footer'>Footer</div>
</div>
There are couple of child divs in a parent div. I want to show/hide a particular child.
<div id="parent">
<div id="child0">Text here</div>
<div id="child1">Text here</div>
</div>
I want on mouse over div id="parent" to show hide div id=child0, everything else in parent div stays the same (visible).
You can do it all with CSS. Assuming this HTML:
<div id="parent">
<div id="child0">Child0 Text here</div>
<div id="child1">Child1 Text here</div>
</div>
You can add something like this CSS:
#child0 {
display: none;
}
#parent:hover #child0 {
display: block;
}
See it in action here: http://jsfiddle.net/QjeUq/
Try this:
CSS:
.outer_wrapper_class .inner_wrapper_class {
display: none;
}
.outer_wrapper_class:hover .inner_wrapper_class {
display: block;
}
HTML:
<div class='outer_wrapper_class'>
<!-- HOVERABLE CONTENT HERE -->
<div class='inner_wrapper_class'>
<!-- HIDE/SHOW CONTENT HERE -->
</div>
<!-- HOVERABLE CONTENT CAN ALSO BE HERE -->
</div>
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; }