<div style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 999999999; opacity: 0; cursor: pointer;"></div>
I'm trying to remove this entire thing with jQuery but i don't know how to actually refer to the style or div, i don't really know what i should call it.
It doesn`t have a dot between < and div, i had to do that so the site would show it.
give id or class to that div and than you can hide that div with jQuery
example:
<div id="block" class="blabla">...</div>
<script>$("#block").hide(); // or (".blabla").hide(); </script>
For removing:
You can do it in css:(or add to the div's style)
div{
display:none
}
Div's style:
<div style="display:none;..."></div>
Related
I'd like to change the background image of the body (or my section) on link hover as in this example:
http://www.passion-pictures.com/paris/directors/
Is there any way to do it without using JS.
I only know how to code HTML/CSS
EDIT :
When I Hover on the first link (Michelle) it changes the background of my section as expected.
But when I hover on the second link (Franck) the top of my second link background begins under my first link. So the top of my default background is still visible.
My links are displayed vertically
It is possible but there will be too much HTML code and CSS workarounds.
if you still want in CSS only then refer this code - change css background on hover
HTML code
<div class=container>
<div class="link">
bg1
<div class=background></div>
bg2
<div class=background><div>
</div>
</div>
CSS Code
div.link > a {
displya: inline-block !important;
position: relative !important;
z-index: 5;
}
.bg1:hover + .background {
background: red;
}
.bg2:hover + .background {
background: green;
}
.background {
background: transparent;
position: absolute;
width:100%;
height: 100%;
top:0;
left: 0;
}
This will give you an idea of implementation but I'll suggest you go with JS that is a much better way of doing it.
Hope this might help you
HTML
<div class="container">
bg1
</div>
CSS
.bg1:hover::after {
content: "";
position: fixed;
top: 0;
left: 0;
background: red;
width: 100%;
height: 100%;
z-index: -1; /* index would get changed based on your need */
}
I am creating a landing page with HTML/CSS and using a little bit of bootstrap. I am having trouble resizing my main page to fit 100% height and width when the page is opened.
I want it to look like google docs' main page: https://www.google.com/docs/about/. If you go there, you'll see:
the nav is in fixed position and follows you everywhere. I got that part down.
The main image automatically resizes depending on your screen size. The icon-arrow-hint (the arrow on mid-bottom of page) can always be seen on the bottom of the image.
Two problems that I have:
Got this weird gap on the right side even though I set right: 0.
After page load, it looks like it fits about 90% of the height and I still need to scroll down. I placed this text on the bottom - theoretically, this should be shown on the bottom of the screen without scrolling, but I have to always scroll slightly down.
This is the JSfiddle: https://jsfiddle.net/iggyfiddle/DTcHh/35435/
I am using position: absolute and I 0-ed all 4 sides.
How can I fit the yellow div 100% height and 100% width like the google page nicely?
If you give an element height: 100%, but there's another element above or below in the same container, you need to adjust for the height of the other element, otherwise there will be an overflow.
Also, adjust for the -15px horizontal margins applied by Bootstrap.
Try this:
.primary-content {
position: absolute;
top: 10%;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 90%; /* ADJUSTMENT */
background: yellow;
margin: 0; /* NEW */
}
https://jsfiddle.net/DTcHh/35437/
Your .primary-content div has the bootstrap .row class on it which declares negative horizontal margins. A solution would be to remove the .row class from your div or to override the margins in css.
These are the default bootstrap .row styles:
.row {
margin-right: -15px;
margin-left: -15px;
}
Using the class of .row adds a margin of 15px. A quick fix is to remove the class from primary-content div like so.
<div class="primary-content">
<div class="col-md-12">
<h1>This is a super awesome product</h1>
<h4>Help me stackoverflow, you are my only hope!</h4>
</div>
or add a class and remove the margins.
The reason that your yellow div is going too far is that you need to set the height to 90%.
To fix the weird padding on the right side, add margin: 0 !important;.
.primary-content {
position: absolute;
top: 10%;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 90%; // change this
background: yellow;
margin: 0 !important; // add this
}
See this JSFiddle or run the snippet below
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.universal-header {
background: red;
border-radius: none;
height: 10%;
width: 100%;
position: fixed;
}
.color-brown {
color: #58482C;
text-decoration: none;
}
.primary-content {
position: absolute;
top: 10%;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 90%;
background: yellow;
margin: 0 !important;
}
.bottom {
position: absolute;
bottom: 0;
right: 0;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<nav class="navbar universal-header navbar-static-top">
<a class="navbar-brand navigation-title color-brown">
</a>
<span class="color-brown navbar-brand navigation-title">HELLO</span>
<span class="navbar-brand navigation-title pull-right color-brown">Login</span>
<span class="navbar-brand navigation-title pull-right color-brown">Features</span>
<span class="navbar-brand navigation-title pull-right color-brown">About</span>
</nav>
<div class="row primary-content">
<div class="col-md-12">
<h1>This is a super awesome product</h1>
<h4>Help me stackoverflow, you are my only hope!</h4>
</div>
<div class="bottom">
You should be able to see me without scrolling
</div>
</div>
Problem 1:
Got this weird gap on the right side
When using bootstrap's row class it will add a margin of -15px to the left and right of your div, see the second answer to this question if you want to understand better why.
Solution: don't use the row class for your primary-content div.
Problem 2:
this should be shown on the bottom of the screen without scrolling,
but I have to always scroll slightly down
you are using absolute positioning, remember that needs a relative positioned parent container, in your case, since you don't have any, everything is relative to the initial containing block, hence your viewport/window.
Quick fix: delete the height: 100%; css from .primary-content
Warning: using absolute positioning the way you are right now will bring you trouble if you want to add more content below your yellow container
Using slick: http://kenwheeler.github.io/slick/
HTML
<div class="carsoule" style="overflow:hidden; width: 300px; height: 200px; margin: 0 auto; background:red">
<div>
<img src="http://theheightsanimalhospital.com/clients/15389/images/playful-kitten-6683.jpg" width="250">
</div>
<div>
<img src="http://theheightsanimalhospital.com/clients/15389/images/playful-kitten-6683.jpg" width="250">
</div>
</div>
CSS
.slick-prev, .slick-next {
height: 55px;
width: 55px;
}
.slick-prev {
left: -80px;
/*plan to add button image*/
}
.slick-next {
right: -80px;
/*plan to add button image*/
}
Jsfiddle Demo
Tried to override, but the prev and next buttons stay stuck inside the carousel. Wanted to replace the css with button images and the buttons should be outside the carousel, just like the example on slick website. Couldn't figure where I went wrong.
Help appreciated!
UPDATE : $('.carsoule').slickNext(); won't work anymore.
Use $('.carsoule').slick("slickNext"); instead.
https://github.com/kenwheeler/slick/issues/1613
Looking at the css that this plugin uses, I noticed the parent has overflow:hidden applied to it, so your arrows wont show beyond the parents container.
You can mess with adding a extra overflow !important rule to the container, however, I've looked over at some methods that you can use to trigger next/prev slide, and turns out that you can call on your carousel to change slide, when clicked on a certain class/id outside of the carousel container.
So basically, after your carousel(or anywhere on the page if it helps you out), add two div/button/a/whatever tags, and add either a class or id to call upon the slider to change its slide using: slickNext() or slickPrev()
You can wrap everything in a master container, your carousel and those two extra tags and style them the way you want.
Check out the demo here, and the extra js/markup used bellow:
<div class='next-button-slick'>
next please
</div>
<div class='prev-button-slick'>
prev please
</div>
$('.next-button-slick').click(function(){
$('.carsoule').slickNext();
});
$('.prev-button-slick').click(function(){
$('.carsoule').slickPrev();
});
UPDATE 2
If you want to keep your markup, and not add any extra stuff, you can either remove the inline overflow: hidden rule from the container, or via css with overflow: visible !important, and set those 2 arrows to position absolute, and work you way from there.
Check out the demo here and the css bellow:
/*extra stuff*/
.carsoule{
overflow: visible !important;
}
.slick-prev, .slick-next {
position: absolute;
background: red;
}
<div class='next-button-slick'>
next please
</div>
<div class='prev-button-slick'>
prev please
</div>
$('.next-button-slick').click(function(){
$('#portfolio-carousel').slick("slickNext");
});
$('.prev-button-slick').click(function(){
$('#portfolio-carousel').slick("slickPrev");
});
This should solve your issue,
CSS
body {
background: #d7d7d7;
}
.carsoule {
background: yellow;
margin: 0 auto;
overflow: visible;
width: 250px;
}
.slick-prev,
.slick-next {
height: 55px;
width: 55px;
}
.slick-prev {
left: -80px;
/*plan to add button image*/
}
.slick-next {
right: -80px;
/*plan to add button image*/
}
HTML
<div class="carsoule">
<div>
<img src="http://theheightsanimalhospital.com/clients/15389/images/playful-kitten-6683.jpg" width="250" />
</div>
<div>
<img src="http://theheightsanimalhospital.com/clients/15389/images/playful-kitten-6683.jpg" width="250" />
</div>
</div>
The carsoule had overflow:hidden, so if you positioned it outside it was hidden.
The problem is the hover. Just add the block of code below to it and you'll be just fine.
.slick-next:hover,
.slick-prev:hover {
background-color: red;
color: white;
}
See working example here
You missed out the important slick-theme.css http://kenwheeler.github.io/slick/slick/slick-theme.css. I added this file and meddled with your codes and came up with this solution:
HTML
Re-styling your wrapper to include .slider class with proper margins:
class="carsoule slider"
Modified CSS
.slick-prev:before, .slick-next:before {
color:red;
}
.slick-prev, .slick-next {
height: 55px;
width: 55px;
}
.slick-prev {
left: -80px;
/plan to add button image/
}
.slick-next{
right: -80px;
/plan to add button image/
}
.slider {
margin:0 80px 0 80px;
width: auto;
}
I have this code:
HTML:
<body>
<div id="menu">
menu elements...
</div>
<div id="main">
Main website content...
</div>
</body>
CSS:
body{background-color:CCCCFF;}
div#menu{background-color:#000000;display:table;height:45px;}
div#main{background-color:#FFFFFF;border-radius:10px;margin:10px;}
The menu div is a horizontal menu bar.
I want the main div fill the whole page (except the menu). Also when it is needed it should fill more space (example: if it has a lot of content). I don't want to use any javascript or the calc() method of CSS.
Is it possible to do what I want?
Thank you for your time!
Yes, you can add to your CSS:
html, body {
height: 100%;
}
and than your div will correctly use height attribute with %. You can add bottom, left, right, top attributes:
div#main {
position: absolute;
overflow: auto;
bottom: 5px;
top: 50px;
left: 5px;
right: 5px;
}
check margins and paddings.
If you can use javascript, that's may be interesting to use
height: auto;
max-height: 300px; /*calculated value on resize and load*/
I'm not a CSS expert. I'm trying to place an <input type="button"> in the center of an <img> and I'm having some trouble doing so. Here's a fiddle and here is my HTML:
<div id="avatar">
<img src="http://www.averageadjustersusca.org/aaa/images/profileholder.gif" alt="My avatar" />
<input id="btnAvatar" class="button" type="button" name="Button" value="Change">
<p>Text</p>
</div>
I want the input to be displayed over the image, also, the text need to be at the right. I tried using:
img { width: 300px; height: 300px; float: left; }
input { position: absolute; margin:140px 0px 0px 130px;}
But it only works on chrome / safari, on other browsers, the button is placed after the image and not in front of it.
What is the best way to do this?
Obs.: The space where the button is, needs to be empty, or else, the text will move up.
This is how it's displayed on chrome:
This is how it's displayed on firefox:
You need to specify the x and y positions on an absolute position. Change the css for input to this:
input { position: absolute; top:0; left:0; margin:140px 0px 0px 130px;}
There is a simple and clean method for doing this code. The trick is to use the DIV tag to contain and position everything in place.
Use a main DIV to contain everything and give it the position:relative property.
Place the img and input tags in a single DIV and assign this DIV the float:left property.
Using CSS to select the P tag and float it to the left. This will position the text beside the DIV containing the img and input.
Now assign the input tag the position:absolute property while using the properties TOP & LEFT to postion it into place.
Here's an example:
<div id="avatar-container">
<div id="avatar-image-btn">
<img src="http://www.averageadjustersusca.org/aaa/images/profileholder.gif" alt="My avatar" />
<input id="btnAvatar" class="button" type="button" name="Button" value="Change">
</div>
<p>Text</p>
</div>
<style>
#avatar-container { position: relative; }
#avatar-container p { float: left; }
#avatar-image-btn { float: left; }
#avatar-image-btn img { }
#avatar-image-btn input { position: absolute; top: 135px; left: 120px; cursor: pointer; }
</style>
See, clean and simple, works every time and is multi-browser compatible.
*The margin property can cause a mess when used without caution. Best practice is to use it for stacking tags in divs and not for positioning with large gapping margins.
use z-index
input { position: absolute; margin:140px 0px 0px 130px; z-index:2}
this is pushing your button one layer up
after understanding the question correctly here is a solution
img { width: 300px; height: 300px; float: left; border:1px solid black; position:absolute}
input { position: absolute; margin:140px 0px 0px 130px;}
as mentioned bellow in comments the problem was in positioning
You may add position:relative for #avatar and give #btnAvatar top:0; left:0;
This should do it: http://jsfiddle.net/a6tA7/9/
I would recommend you use top: and left: to position the input element rather than margin: