I have a site that has 4 subpages. I want to add nivo slider on each page in separate height. I've added 3 sliders successfully, but on one page I want to show nivo-controlNav with margin top 30px, how can I do that?
My code looks like this:
.nivo-controlNav {
text-align:center;
padding: 0;
}
It's good for my other 3 pages but I want to add:
.nivo-controlNav {
text-align:center;
padding: 0;
margin-top:30px;
}
Add this on the page wher u need margin in < head >< / head > section
<script type="text/javascript">
$(document).ready(function () {
$('.nivo-controlNav').css('margin','30px');
});
</script>
if that doesnt help try setting z-index, visible properties like above
$('.nivo-controlNav').css('z-index','1500');
$('.nivo-controlNav').css('visibility','visible');
You must add some class or id to separate from others. Then you write a style for that
particular class or id or use the inline style (Inline is not a good practice)
for example
.classname
{
margin-top:30px;
}
If it is on a completely separate page you can easily just add the second set of rules you have above. If they are all governed by one single style sheet you can do this
.differentClassName{
margin-top: 30px;
}
.nivo-controlNav {
text-align: center;
padding:10px 0px 0px 0px;
clear:both;
position: relative;
z-index: 10;}
Related
HTML Markup,
<div class="bluredBackground"></div>
<div class="content">
Hi This is dynamic content.<br>
If the div height increases then first div height <br>
should be automatically increase.
</div>
I want first div height should automatically increase whenever the second div height increases because of its dynamic content.
As of now, I was able to place one div on top of another,
.content {
width: 70%;
height: auto;
border:1px solid;
position: absolute;
z-index:10;
background-color: white;
}
.bluredBackground {
width:70%;
height:70%;
background-color: red;
z-index:0;
border:1px solid;
position:absolute;
-webkit-filter: blur(2px);
}
How can I solve this problem with CSS?
I was trying this thing > http://jsfiddle.net/hsinghbisht/nLj5dqay/2/
Please help!
Thanks in advance.
This is not a direct answer to question, but what exactly are you planning with the 2nd div (blurred) being on the same height as 1st one?
If you want the fancy red blurred glare behind, then just use box-shadow. Add it to the .content and it will work pretty identical
box-shadow: 0px 0px 4px 0px red;
However, if you definitely need to use the red blurred div, then you cannot solve that with plain CSS. You must use JavaScript and look for class style of one element and copy it to the next one.
Example:
window.onload = () =>
{
const div1 = document.querySelector('.bluredBackground');
const div2 = document.querySelector('.content');
div1.style.height = `${div2.offsetHeight}px`;
}
I am working on a piece of legacy code for a table. In certain cells, I'm adding a notice icon. When you hover over the icon a <span> is made visible displaying some information. I would like to be able to make this <span> smart about its positioning but can't figure out a good method. I can statically position it but depending on which cell in the table it is in it gets lost against the edge of the page. I have done a JsFiddle here demonstrating the issue. Unfortunately, I am not allowed to use anything but HTML, CSS and vanilla JS.
The title attribute to most tags is pretty smart about its position. I have added a title to one of the cells in the table in the jsFiddle (cell containing "Hello"). Is there any way to make my span exhibit the same smart behaviour?
A pop-up can be added before any element by putting the popup html code inside a 'div' with 'position:absolute; overflow:visible; width:0; height:0'.
When these events: 'onmouseenter', 'onmouseleave' are fired on the element, just toggle the popup css attribute 'display' between 'none' and 'block' of the element.
Example on jsfiddle:
https://jsfiddle.net/johnlowvale/mfLhw266/
HTML and JS:
<div class="popup-holder">
<div class="popup" id="popup-box">Some content</div>
</div>
Some link
<script>
function show_popup() {
var e = $("#popup-box");
e.css("display", "block");
}
function hide_popup() {
var e = $("#popup-box");
e.css("display", "none");
}
</script>
CSS:
.popup-holder {
position: absolute;
overflow: visible;
width: 0;
height: 0;
}
.popup {
background-color: white;
border: 1px solid black;
padding: 10px;
border-radius: 10px;
position: relative;
top: 20px;
width: 300px;
display: none;
}
So I'm trying to dynamically append a bunch of div elements containing words to my page (each has the .magnet class). However, many of them end up spilling outside the boundaries of the container, and I cannot figure out how to stop that from happening. If anyone could take a look at my jsfiddle and help me out, I would be very appreciative. I've also included my css code for the container below.
JsFiddle Example
body {
margin:0 auto;
overflow:hidden;
}
#container {
background-color: #446b81;
}
.magnet {
width:45px;
background-color: #FFFFFF;
padding:5px 25px;
font-family: Times;
font-size: 16px;
border:1px outset;
position:absolute;
}
Why don't you reduce the document width and height by some values? (50 and 100 are just random numbers but you can fix them with the exact size of the divs).
testsub.css("top",Math.floor(Math.random() * ($(document).height()-50)));
testsub.css("left",Math.floor(Math.random() * ($(document).width()-100)));
Updated fiddle: https://jsfiddle.net/mszvbfoe/5/
Put overflow:hidden; inside your container and fix the width for your container
#container
{
background-color: #446b81;
overflow:hidden;
width:500px;
}
I have a text on my website that scrolls horizontal through the page. I’m trying to get around 8 characters highlighted in black, while the rest is grey. But those characters are meant to vary as you scroll though, the highlighted bit should remain in place.
In case this doesn’t make any sense, if grey was an x, it should look something like this:
xxxxx xpsum dolox xxx xxxx
xxxx xxsum dolox sxx xxxx
xxx xxxum dolox six xxxx x
xx xxxxm dolox sit xxxx xx
I’m trying to get this done in jQuery, but I can’t get it to work. I also like to say that I’m not at all an expert in webdesign, so I don’t know what I’m doing. Anyway, I’ve tried two different approaches, one is to say “change colour of text when going over an underlying div”. The other approach is to change the colour of the text depending on the scrolling position, but the problem here is that it takes the scrolling position of the whole div, instead of a fixed position on the page. Both don’t work at the moment, examples are here:
jsfiddle 9p29tz2f
jsfiddle 9p29tz2f/1
If anyone has any ideas how to approach this, or needs some more clarification, please let me know. Many thanks!
Clone the text and set it as a child of the overlay box then scroll them together:
$(function(){
var $bodytext = $('#bodytext'),
$clone = $bodytext.clone();
//copy the text and append it to #black:
$clone.attr("id","clone").prependTo("#black");
//scroll #clone with #bodytext:
$bodytext.scroll(function(){
$clone.scrollLeft($bodytext.scrollLeft());
});
});
http://jsfiddle.net/9p29tz2f/2/
I've taken Teemu's solution and modified it a bit: http://jsfiddle.net/9af91wcL/2/
The important bits: The code moves a white DIV (#grey-overlay) on top of the text and makes it transparent. By adding black and white pixels, you get grey. The grey level is determined by the alpha channel (0.7 in the rgba() function).
You need to assign a height or it will look odd. I use 1.5em to make sure it doesn't overlap with the scroll bar of the #bodytext div.
Also make sure that the top/left position of both div's is the same.
In your real code, you can make the horizontal scrollbar disappear and scroll with JavaScript.
HTML
<div id="grey-overlay"></div>
<div id="bodytext">text...</div>
CSS
body {
background: #ffffff;
color: #000000;
font-family: sans-serif;
font-size: 200%;
}
#bodytext {
top: 15%;
width:200px;
height: 2em;
padding: 0;
position:absolute;
overflow-x:scroll;
overflow-y:hidden;
white-space: nowrap;
}
#grey-overlay {
background-color: rgba(255, 255, 255, 0.7);
width:40px;
height: 1.5em;
top:15%;
position:fixed;
z-index: 10;
}
You need to show the same content within #black as in #bodytext, and synchronize its position relative to #bodytext scrolling. This can be achieved by using an extra wrapper around #black. Something like this:
CSS:
#cover {
top: 15%;
height:50%;
width: 120px;
padding: 0;
position:fixed;
overflow-x: hidden;
background-color: #D8D8D8;
}
#black {
color: #000000;
width:100%;
height:100%;
top:0px;
left: 0px;
position:absolute;
white-space: nowrap;
z-index: 10;
}
#bodytext {
top: 15%;
width:100%;
height:85%;
padding: 0;
position:absolute;
overflow-x:scroll;
white-space: nowrap;
color: #D8D8D8;
}
HTML:
<div id="cover">
<div id="black"></div>
</div>
JS:
$(document).ready(function () {
var black = $('#black'),
btext = $('#bodytext');
black.text(btext.text()); // Clone the content
btext.scroll(function () {
var pos = btext.scrollLeft();
black.css('left', -pos + 'px'); // Set the position to match #bodytext
});
});
A live demo at jsFiddle.
Notice, that if you need some left margin, it has also to be "calculated in" to pos.
I wish to display a button at a fixed position(sticky) on the page and it should always be on top of other elements on the page, assuming I have no knowledge of the structure and styles used on that page. The solution can only use Javascript(no jQuery), CSS3 and HTML5.
The solution has to be dynamic/adaptive i.e not directly dependent on the z-index values used on the page.
Demo: http://jsfiddle.net/lotusgodkk/sf1fukm5/
CSS:
.a {
position:fixed;
right:10px; //optional
top:10px; //optional
z-index:1;
background:grey; //optional
color:#000; //optional
padding:20px; //optional
}
HTML:
<div>--Content--</div>
<div class="a">Fixed</div> //Fixed div
<div>--Content--</div>....
For dynamic z-index using jQuery:
var highest = -999;
$("*").each(function () {
var current = parseInt($(this).css("z-index"), 10);
if (current && highest < current) highest = current;
});
$('your-element-selector').css('z-index',highest);
Using javascript:
How can you figure out the highest z-index in your document?
Refer: How to find the highest z-index within a document no matter what tags they are?
JSFIDDLE
CSS:
.fixed-button {
width: 125px;
background: #FFFFFF;
border-style: solid;
border-width: 1px;
border-radius: 3px;
padding: 5px;
margin-left: 0px;
position: fixed;
z-index: 999;
top: 70px;
}
HTML:
<button class="fixed-button"> fixed-button </button>
I hope you got the answer. You can change the position of button where ever you need