Why does this silly onmousedown example stop working in the parent when there is an iframe?
document.onmousedown=function(e) {
console.log("body clicked");
};
It works on this page (https://jsfiddle.net/wc74m29n/1)
<div class="wrapper">
<!--<iframe src="https://www.wikipedia.org" />-->
<div> lorem ipsum </div>
</div>
But fails when I switch to iframe (https://jsfiddle.net/wc74m29n)
<div class="wrapper">
<iframe src="https://www.wikipedia.org" />
<!--<div> lorem ipsum </div>-->
</div>
Related
I'm using MaterializeCSS and I'm looking to add and image inside of the "collapsible-body" of a Collapsible element... but it doesn't shows up.
It's possible to do what i'm trying some way? Maybe with CSS or JS?
here is my code:
<ul class="collapsible">
<li>
<div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
<div class="collapsible-body">
<p>Lorem ipsum dolor sit amet.</p>
<img href="https://materializecss.com/images/yuna.jpg"><!-- Example image -->
</div>
</li>
</ul>
and ofcourse the JS to initialize the collapsible:
$(document).ready(function(){
$('.collapsible').collapsible();
});
Images use a SRC attribute, not HREF:
<ul class="collapsible">
<li>
<div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
<div class="collapsible-body">
<p>Lorem ipsum dolor sit amet.</p>
<img src="https://materializecss.com/images/yuna.jpg"><!-- Example image -->
</div>
</li>
</ul>
This question already has answers here:
Change div order with CSS depending on device-width
(1 answer)
How can I reorder my divs using only CSS?
(27 answers)
How to change order of divs on smaller screens?
(1 answer)
Closed 3 years ago.
How can i reorder class on mobile? i want to put the title first, then the image, then paragraph and the button.
<div class="container">
<div class="row">
<div class="col-md-6">
<h3 class="pt-5">Title</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</p>
submit
</div>
<div class="col-md-6 col-xs-12 align-self-center">
<img src="img/duo.png" alt="image" />
</div>
</div>
</div>
Please check the image below for more details
If you are using Bootstarp 4 then you can use order class to reorder your div
for eg:
<div class="order-sm-2 order-1"></div>
<div class="order-sm-1 order-2"></div>
You can do by CSS also. Make sure you are using FLEX properties
.your_class{
order: 2;
}
.your_class1{
order: 1;
}
I'm not too familiar with bootstrap, but for non bootstrap ideas, I could think of two potential solutions one could use here. First you could add the image under the title and hide it on desktop screens and then use display: block for mobile screens using media queries.
Second, I'm not sure if you can use jquery or not, but here is a potential jquery solution using .insertAfter(). Then once you detect a mobile size, you can place that image wherever you would like. Like such:
var isMobile = 768;
if ($(window).width() <= isMobile) {
$('.duo').insertAfter('.pt-5');
}
You can test that here: http://jsfiddle.net/3buty5oL/1/
$(function(){
if($(window).width() < 767){//first check the device width
$(".image img").insertAfter(".pt-5");//move the image after title
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6">
<h3 class="pt-5">Title</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</p>
submit
</div>
<div class="col-md-6 col-xs-12 align-self-center image">
<img src="https://picsum.photos/200/300" alt="image" />
</div>
</div>
</div>
it can be done using juery in two steps
1. check for device width.
2. if its mobile then move the image next to title.
Normally you can use bootstrap4 order classes to recorder the elements on the screen. But based on the structure (i.e., on Desktop you kind of have 2 columns but on Mobile you have 1 vertical column where Image sits in between Title and Paragraph), it is not so easy to just use order classes to achieve the desired result.
I think the best way to achieve the result is to put the Image on 2 places and show/hide one of them based on the screen width.
HTML
<div class="container">
<div class="row">
<div class="text-center col-md-6 text-md-left">
<h4>Title</h4>
<img class="img-fluid d-md-none" src="..." />
<p>
Paragraph. Lorem ipsum dolor sit amet, consectetur
adipiscing elit
</p>
More
</div>
<div class="col-md-6">
<img class="img-fluid d-none d-md-block" src="... />
</div>
</div>
</div>
On mobile, the image on the right column is not showing due to d-none:
On desktop, the image on the right column is showing due to d-md-block, but the image between the Title and Paragraph is not showing due to d-md-none:
fiddle: http://jsfiddle.net/aq9Laaew/235510/
I am trying to create a layout using Flexbox where I have elements which consist of 3 other internal elements. The parent item element contains 3 divs: image, button, text. The issue is that my items will not always contain images or text that is the same height as the others. The button is the one thing that will have a consistent height. I am trying to figure out if it's possible to have each of my image divs be the same height as the tallest one and same for the text divs. I would also like the images to be vertically aligned to the bottom, so if one element has a shorter image, the white space to make the element the same height will go above the image like this:
And here is what I have so far:
.container {
display:flex;
flex-wrap:wrap;
flex-flow:row wrap;
justify-content:center;
}
.item {
max-width:200px;
margin:0 20px;
}
<div class="container">
<div class="item">
<div class="image">
<img src="http://placehold.it/150x300" />
</div>
<div class="button">
<button>Click Me</button>
</div>
<div class="text">
<p>consectetur adipiscing elit.</p>
</div>
</div>
<div class="item">
<div class="image">
<img src="http://placehold.it/150x200" />
</div>
<div class="button">
<button>Click Me</button>
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="item">
<div class="image">
<img src="http://placehold.it/150x250" />
</div>
<div class="button">
<button>Click Me</button>
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class="item">
<div class="image">
<img src="http://placehold.it/150x270" />
</div>
<div class="button">
<button>Click Me</button>
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
I know that I could do this using Javascript to loop through each item to get the tallest and change the CSS of all others, but I'd like to use only CSS if possible. I also know that I could just set the height of the image container to the height of the tallest image, but these images are going to be dynamic and there are going to be a lot of them, so I'd rather have a solution that doesn't require hardcoding values.
Flexing the .item class and adding justify-content: flex-end; would provide the majority of the affect, but as far as I know you'd have to set a specific height on at least one of the items if you want two elements to be aligned the same across flexbox. Happy to be proven wrong though.
You could alternatively use margin-top: auto on the first child to push any unused space to the top and everything else down.
.container {
display:flex;
flex-wrap:wrap;
flex-flow:row wrap;
justify-content:center;
}
.item {
max-width:200px;
margin:0 20px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.text {
height: 36px; /* magic number */
}
<div class="container">
<div class="item">
<div class="image">
<img src="http://placehold.it/150x300" />
</div>
<div class="button">
<button>Click Me</button>
</div>
<div class="text">
<p>consectetur adipiscing elit.</p>
</div>
</div>
<div class="item">
<div class="image">
<img src="http://placehold.it/150x200" />
</div>
<div class="button">
<button>Click Me</button>
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="item">
<div class="image">
<img src="http://placehold.it/150x250" />
</div>
<div class="button">
<button>Click Me</button>
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class="item">
<div class="image">
<img src="http://placehold.it/150x270" />
</div>
<div class="button">
<button>Click Me</button>
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
I'm using Bootstrap 3.
On large screens I want to have a sidebar on the left and the maincontent on the right. On small screens I want to have important blocks of the sidebar on top, then the maincontent, then the less important blocks of the sidebar. Is there a way to achieve that?
Here's a JS Bin showing the problem: http://jsbin.com/wibucopi/1/ and below is the current code (which, however, displays all sidebar content on top on small screens).
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<div class="upper" style="background:red">
<h3>I want to be <b>above</b> the main content on small screens!</h3>
</div>
<div class="lower" style="background:green">
<h3>I want to be <b>below</b> the main content on small screens!</h3>
</div>
</div>
<div class="col-sm-9">
<h1>Main content</h1>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
I've already played around with col-sm-pull/push-x, but I could only achieve that the whole sidebar is displayed below the maincontent on small screens.
I don't want to duplicate content and show / hide it with visible-XY, hidden-XY, as the page would get bigger and it feels just wrong.
It would be great to have a pure Bootstrap css solution, or at least a css only one (I wouldn't like to use js).
You could do something like this:
Bootply Demo
HTML:
<div class="container-fluid">
<div class="row">
<div class="upper col-sm-3" style="background:red">
<h3>I want to be <b>above</b> the main content on small screens!</h3>
</div>
<div class="col-sm-9 col-sm-pull-right">
<h1>Main content</h1>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="lower col-sm-3" style="background:green">
<h3>I want to be <b>below</b> the main content on small screens!</h3>
</div>
</div>
</div>
CSS:
#media (min-width: 768px) {
.col-sm-pull-right {
float: right;
}
}
.lower {
clear: left;
}
I want to select the second div in my markup with css using :nth-child but I cannot make it work.
I have this markup generated by a plugin:
<div class="single-container">
<div class="toggle-default">
<div class="toggle">
<div class="toggle_title toggle_active">FIRST</div>
<div class="toggle_content" style="display:block;">Lorem ipsum sit dolor amet</div></div>
</div>
<div class="toggle-default">
<div class="toggle">
<div class="toggle_title toggle_active">SECOND </div>
<div class="toggle_content" style="display:block;">Lorem ipsum sit dolor amet</div></div>
</div>
<div class="toggle-default">
<div class="toggle">
<div class="toggle_title toggle_active">THIRD </div>
<div class="toggle_content" style="display:block;">Lorem ipsum sit dolor amet</div></div>
</div>
</div>
I've tried this : .toggle-deafult .toggle:nth-child(2) { background:red; } and this .toggle div:nth-child(2) but it's not working.
Can someone help me with this ?
Thank you !
LATER EDIT: I've modified the markup, this is what I need to modify : <div class="toggle_title toggle_active">SECOND </div>
.toggle-default:nth-child(2) .toggle_title{ background:#f00;}
It is the second one which you want to modify.
You need .toggle-default:nth-of-type(2n) { color: red; } (note the 2n).
.toggle-default:nth-child(2) {
background-color: red;
}