hide div element in iframe1 : I want to hide the div
2: div class which is landing-header-right
how to specific div element {display : none}
You could hide landing-header-right with internal css or external css like:
.landing-header-right {
display: none;
}
You can also hide using inline css like:
<div class="landing-header-right" style="display: none;"></div>
Obviously, first one is more appreciable. If there are many landing-header-right and you wanted to hide that specific one, then you could give id or extra class to hide that element. In html, you could add hide-iframe id in the same div and use the css:
// html
<div id="hide-iframe" class="landing-header-right" style="display: none;"></div>
// css
#hide-iframe {
display: none;
}
In your case:
// Remove extra style
<iframe [src]="urlSafe" style="border: 0px; margin-left: -36px; height: 812px; margin-top: -186px; margin-bottom : -186px; width: 650px; display: none;">
<div id="hide-iframe" class="landing-header-right"></div>
</iframe
Related
Really confused by this one. I have a grid of items with a link to wrap the image, an image overlay div, and a title. When the link is visited, the nested image overlay should change its background color opacity. But it's not being applied. I can verify that the :visited pseudoclass is taking effect, because it will apply color change to the nested title. But the opacity won't change. I've tried numerous methods of applying it. Here's a pen:
https://codepen.io/heaversm/pen/gOYNJQv
HTML
<div class="gallery__container">
<div class="gallery__item">
<a class="gallery__link" href="http://codepen.io">
<div class="gallery__image_container">
<img src="https://i.imgur.com/MQcuk3n.jpg">
<div class="gallery__overlay"></div>
</div>
<p class="gallery__title">Title</p>
</a>
</div>
<div class="gallery__item">
<a class="gallery__link" href="http://nonsensesite.com">
<div class="gallery__image_container">
<img src="https://i.imgur.com/MQcuk3n.jpg">
<div class="gallery__overlay"></div>
</div>
<p class="gallery__title">Title</p>
</a>
</div>
</div>
CSS
.gallery__container {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 1.375vw;
margin: 0 auto;
padding: 40px 50px;
}
.gallery__image_container {
position: relative;
}
.gallery__item {
width: 100%;
height: auto;
}
.gallery__link {
display: block;
width: 100%;
height: 100%;
&:visited {
color: red; //just to verify visited pseudoclass is applied
.gallery__overlay {
background-color: rgba(0,0,0,.1) !important; //NOT WORKING
}
}
}
.gallery__image {
//width: 100%;
//height: auto;
}
.gallery__overlay {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(black, 0.9);
z-index: 1;
}
From https://developer.mozilla.org/en-US/docs/Web/CSS/:visited
For privacy reasons, browsers strictly limit which styles you can apply using this pseudo-class, and how they can be used:
Allowable CSS properties are
color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, column-rule-color, and outline-color.
Allowable SVG attributes are fill and stroke.
The alpha component of the allowed styles will be ignored. The alpha component of the element's non-:visited state will be used instead, except when that component is 0, in which case the style set in :visited will be ignored entirely.
Although these styles can be change the appearance of colors to the end user, the window.getComputedStyle method will lie and always return the value of the non-:visited color.
And from my own observation, child elements of a link are also subject to the same styling restrictions.
I'm working on a tiny css action which based on A element hover, will display another element. The code is pretty basic:
<a title="#" class="portfolio-reaction" href="#">
<img src="http://i.imgur.com/OZb7SI8.png" class="attachment-grid-feat" />
<div class="headline-overlay">LOREM IPSUM</div>
</a>
.portfolio-reaction {
width:250px;
height:250px;
display:block;
}
.headline-overlay {
background:none;
height:100%;
width:100%;
display:none;
position:absolute;
top:10%;
z-index:999;
text-align:left;
padding-left:0.5em;
font-weight:bold;
font-size:1.3em;
color:#000;
}
.attachment-grid-feat:hover ~ .headline-overlay {
display:block;
}
and jsfiddle: https://jsfiddle.net/yL231zsk/1/
This solution works in 99%. The missing percent is the effect - while moving mouse arrow through the button, text is blinking. I have no idea why. Secondly - what if I want to extend number of appearing elements from 1 to 3. So to have:
<a title="#" class="portfolio-reaction" href="#">
<img src="http://i.imgur.com/OZb7SI8.png" class="attachment-grid-feat" />
<div class="headline-overlay">
<p class="element-1">abc</p>
<p class="element-2">111</p>
<div class="element-3">X</div>
</div>
</a>
Thank you for any tips and advices.
You wrote the following in your css file :
.attachment-grid-feat:hover ~ .headline-overlay {
display:block;
}
It won't work since .attachment-grid-feat isn't the parent of .headline-overlay. So it won't select the state when the parent is selected because there are no element .healine-overlay inside .attachment-grid-feat. Also no need to add ~ between the two. The right selector is the following :
.portfolio-reaction:hover .headline-overlay {
display: block;
}
This way you are targeting the child div .healine-overlay when parent div .portfolio-reaction (you might want to make the <a> tag a <div> tag) is hovered.
.portfolio-reaction {
width: 250px;
height: 250px;
display: block;
}
.headline-overlay {
background: none;
display: none;
position: absolute;
top: 10%;
z-index: 999;
text-align: left;
padding-left: 0.5em;
font-weight: bold;
font-size: 1.3em;
color: #000;
}
.portfolio-reaction:hover .headline-overlay {
display: block;
}
<div title="#" class="portfolio-reaction" href="#">
<img src="http://i.imgur.com/OZb7SI8.png" class="attachment-grid-feat" />
<div class="headline-overlay">
<div id="element-1">Hello 1</div>
<div id="element-2">Hello 2</div>
<div id="element-3">Hello 3</div>
</div>
</div>
In this code snippet, three elements are contained inside .headline-overlay. On hover, all three elements are displayed.
First, change the last CSS line from this:
.attachment-grid-feat:hover ~ .headline-overlay {
display:block;
}
into this:
.attachment-grid-feat:hover .headline-overlay {
display:block;
}
And will "half" work. You need after to change the width and height of your <div class="headline-overlay"> from a smaller percentage to match your square width and height(leaving it to 100% covers the entire screen, and as a result, the text wont dissapear, no matter where you will move the cursor). Or, If you want your <div> element to match automaticaly the square size, then you leave the width and height unchanged and change only his position:absolute into position:relative and of course, a little adjusting his position from top.
Here is a working fiddle: https://jsfiddle.net/yL231zsk/9/
I'm working on a website and I've to create a table with a mouse over effect the effect is only when you go with the mouse on the picture and only on the PDF icon.
What I need now is to apply this effect when you go with the mouse on the single table rows. How can I do it?
HTML:
<td class="thumbnail-item" data-th="PDF"><img src="http://salmenpark-test.nowcommu.myhostpoint.ch/wp-content/uploads/2015/07/pdf.png" alt="PDF" height="24" width="24">
<div class="tooltip">
<img src="qh_1.png" alt="" width="570" height="403" />
<span class="overlay"></span>
<span class="overlay"></span>
</div></td>
CSS :
.thumbnail-item {
/* position relative so that we can use position absolute for the tooltip */
display: inherit;
height: 10px;
max-width: 5px;
}
.thumbnail-item a {
display: block;
}
.tooltip {
/* by default, hide it */
display: none;
/* allow us to move the tooltip */
position: absolute;
/* align the image properly */
padding: 8px 0 0 8px;
z-index: 500;
top: 7px;
left: -8px !important;
max-width: 570px !important;
max-height: 403px !important;
Antionio:
CSS:
.thumbnail-item {
/* delete the line that was here for inheriting the display * /
height: 10px;
max-width: 5px;
}
HTML:
<tr class="thumbnail-item white">...</tr>
<tr class="thumbnail-item grey">...</tr>
etc, etc.
You were adding the "thumbnail-item" css reference to the <td>tag which represents a cell of data. You want the "thumbnail-item" css reference to be on the entire row, so it should be on each <tr> tag instead.
In your Jquery code, use the class of your td.hover function and try with the below code.
$(".thumbnail-item").hover(function() {
//Write your js code what you have written for hover pdf image
});
It would be better for us to understand if you post your jquery code as well.
I want to target the images and give the odd occurrence different rotation compare to even ones and I am using the following html and css but it does not work. Can anyone let me know what am I missing here:
<div id="blocks" style="overflow-y: scroll; height: 200px; padding: 20px 0 0 20px;">
<div style="height: 150px"><p><img src="mike.jpg" align="left" class="students">
<font color="red">Mike</font>"hello from UK."
</p></div>
<div style="height: 150px"><p><img src="jack.jpg" align="left" class="students">
<font color="red">Jack</font>
"Hello from US"
</p></div>
</div>
And the CSS:
#blocks img:nth-child(even) {
transform:rotate(5deg);
}
#blocks img:nth-child(odd) {
transform:rotate(5deg);
}
Use something like this instead:
#blocks div:nth-child(even) img {
/* styling */
}
#blocks div:nth-child(odd) img {
/* styling */
}
jsFiddle example
The reason this works, is because we are targeting the (even/odd) div elements, as opposed the img elements. The reason :nth-child wasn't working on the img elements was because they weren't siblings, unlike the div elements.
My code :
<div>
<div class='top-class'>
Header Name
</div>
<div class='body-class'>
This is body a
</div>
</div>
<div>
<div class='top-class'>
Another Header Name
</div>
<div class='body-class'>
Another body
</div>
</div>
css code I tried:
.top-class:hover + .body-class { display: block; } /* This is working */
But, I want that to happen when header is clicked. So, i tried this:
.top-class:visited + .body-class { display: block; } /* DIDNT work */
The pseudo class "active" seems to do the job
.top-class:active + .body-class { display: block; background-color: red; }
You can check my jsfiddle
You can use tabindex in you first div then it can have focus event on.
<div class='top-class' tabindex=1>Header Name</div>
Then in css you test focus pseudo class
.top-class:focus + .body-class { display: block; background-color: red; }
Check this jsfiddle