Hey guys I have setup Nivo slider to my specification, but what I want to be able to do is overlay my logo over the top of it. I have tried playing around with the z-index but to no avail.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html lang="en">
<head>
<title>Nivo Slider Demo</title>
<link rel="stylesheet" href="../themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../themes/pascal/pascal.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../themes/orman/orman.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div id="header"><div class="slider-wrapper theme-default"><div id="slider" class="nivoSlider">
<img src="images/dog.jpg" alt="" />
<img src="images/cat.jpg" alt="" />
</div></div></div><script type="text/javascript" src="scripts/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="../jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
</body>
</html>
This is the css I've added
#header{
width: 100%;
background-color: #000000;}
#content{
width:900px;
background:#0C6;
color:#cccccc;
margin-top:-120px;
float:left;
z-index:1000;
margin:0 auto;
}
Thanks in advance
Adam
loaded it up on js fiddler and it seems to work:
http://jsfiddle.net/zdvPv/1/
As #Reporter said, its hard to know what your doing without any source. I just had a play with firbug and i was able to get something to sit over the nivoslider.
<div style="position: absolute; top: 300; left:500; height: 100px; width: 100px; background: red; z-index: 100;">hello</div>
this was placed outside of the slider div. The code is terrible but its just a start for you to see if it would work, you could replace the div with an image or maybe have the image as a background of the div.
Edit: i messed around with firebug on this page: http://nivo.dev7studios.com/ cant show you an image mind
Edit 2: My solution is HTML & CSS not really javascript, so not sure how you want this implemented. You could dynamically inject the "overlay" using jquery
Related
I want to build a small webpage with 3 buttons, like this, with a background image:
By hovering on one of the buttons, the image should change using js.
What would be the best way to achieve this effect?
I tried with background-image, but when the image changes it doesn't change instantly. It first makes the page white, I don't know why.
Thanks.
///edit:
document.addEventListener("DOMContentLoaded", function()
{
document.querySelector(".gaming").addEventListener("mouseover", function()
{
document.querySelector(".container").style.backgroundImage = 'url(1.png)';
});
document.querySelector(".media").addEventListener("mouseover", function()
{
document.querySelector(".container").style.backgroundImage = 'url(2.png)';
});
document.querySelector(".forum").addEventListener("mouseover", function()
{
document.querySelector(".container").style.backgroundImage = 'url(3.png)';
});
});
.container {
position: relative;
height: 1080px;
}
.gaming
{
position: absolute;
height:100%;
}
.media
{
}
.forum {
position: absolute;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Portal</title>
<script src="js.js"></script>
<link rel="stylesheet" type="text/css" href="css.css">
<link rel="stylesheet" type="text/css" href="reset.css">
</head>
<body>
<div class="container">
<image class="image-portal"></image>
<a class="gaming">1</a>
<a class="media">2</a>
<a class="forum">3</a>
</div>
</body>
</html>
That's how I tried to do it. Now I'm trying to position the buttons. Should I change the image src instead of adding a backgroundImage? (also I think I need a handler for mouseleave too).
You can download the images in advance without any code, just place some <link rel="preload"> tags in the header like so:
<head>
<link rel="preload" href="1.png" as="image" type="image/png" />
<link rel="preload" href="2.png" as="image" type="image/png" />
<link rel="preload" href="3.png" as="image" type="image/png" />
</head>
Additional information: https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content
I think you should load the images when you init the page.
You can create an array and then load the images from this array..
My class fixed-content appears to be stopping onmouseover from changing an images which uses src.this
The html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Blah</title>
<link href="https://fonts.googleapis.com/css?family=Mada:900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Francois+One" rel="stylesheet">
<script src="https://use.fontawesome.com/07f9f0d505.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="fixed-content col-md-1 hidden-sm-down">
<div class="row">
<div class="col-md-12 firstSideMenuElement">
<img class="sideMenu" src="images/Desmond_blank-01.png" onmouseover="this.src='images/Desmond_mouseover-01.png'" onmouseout="this.src='images/Desmond_blank-01.png'">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The css
.fixed-content{
top: 0;
/*bottom:0;*/
right: 0;
position:fixed;
overflow-y:scroll;
overflow-x:hidden;
}
When I remove this class from the html the onmouseover works correctly.
UPDATE:
This code is at https://sonjadorlas.github.io/Website/desmond.html
The sidebar menu, which contains four images should change slightly onmouseover. When I scroll down the page, this menu is fixed as I want. But when I mouseover the icons in the sidebar menu again, they do not change. If I scroll back to the top of the page, the behaviour is correct again on mouseover.
SOLUTION:
/* SIDE BAR */
.fixed-content{
top: 0;
right: 0;
z-index: 100;
position:fixed;
overflow-y:scroll;
overflow-x:hidden;
}
Thanks
I think your problem has to do with the z-index on your .fixed-content. You need to make sure that the z-index puts it's position above the other content.
Try adding something like this:
.fixed-content{
z-index: 10;
}
I can't find a way to change the drawer hamburger icon. Let's the code doing the talk :
THE CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>drawer icon color</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header"></header>
<div class="mdl-layout__drawer"></div>
</div>
</body>
</html>
THE OUTPUT
The icon seems to be added dynamically afterwards with colour set to white :
When I change its colour from my chromium console everything's fine.
But if I try using the css class it doesn't work :
.mdl-layout__header .mdl-layout__drawer-button {
color: #000 !important;
}
MY QUESTION
Do I have any other solutions than changing the colour dynamically through the DOM or directly messing with material.min.js?
(Didn't successfully change the colour using javascript neither)
<script type="text/javascript">
document.querySelector(".mdl-layout__header .mdl-layout__drawer-button").style.color = "red";
</script>
Thanks ! ♫♪ I wish you a merry christmas ♫♪♫
this work
.material-icons {
color: red !important;
}
I have added the i-tag from the material icons to your CSS. This is working fine. See snippet:
.mdl-layout__header .mdl-layout__drawer-button i {
color: #000;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>drawer icon color</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header"></header>
<div class="mdl-layout__drawer"></div>
</div>
</body>
</html>
The images in list with .slider class are not being displayed in browser window using MaterializeCSS, but it can be seen in elements. Do sequence of .css and .js loading in head matter?
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Yellowtail' rel='stylesheet' type='text/css'>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="slider">
<ul class="slides">
<li>
<img src="416.jpg">
</li>
<li>
<img src="417.jpg">
</li>
</ul>
</div>
</body>
</html>
First of all, you are including two versions of jQuery, remove the <script> tag for jquery-2.1.1.min.js.
The images are not being displayed because you are not initializing the slider. Add the following jQuery code:
<script>
$(function(){
$('.slider').slider();
});
</script>
Remove opacity: 0 for .slider .slides li
I really need help with this one. I would like to replace the default scrollbar on my iframe with the "perfect scrollbar".
I have downloaded the perfect scrollbar. I also have included the needed files into my html document. According to the documentation, I set up the style of content container inside my iframe. The result is, that when I load my main page and move the mouse cursor on iframe, the "perfect-scrollbar" appears, but the default scrollbar remains. Next issue is, that the new scrollbar is not functional at all. It starts on the top of the iframe content and it ends at the bottom of the iframe content so I can not scroll with it.
HTML of my iframe content page:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sk" lang="sk">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" media="all" href="../css/iframestyle.css" />
<link rel="stylesheet" type="text/css" media="all" href="../css/perfect-scrollbar-0.4.8.min.css" />
<!-- latest jQuery direct from google's CDN -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="../js/perfect-scrollbar-0.4.8.min.js"></script>
<script type="text/javascript" src="../js/perfect-scrollbar-0.4.8.with-mousewheel.min.js"></script>
<script type="text/javascript" src="../js/scroll.js"></script>
<title>TITLE</title>
</head>
<body>
<div id="amfCont">
..... // content to be scrolled
</div>
</body>
</html>
CSS:
#amfCont {
font-family:"Verdana";
text-align:justify;
position:relative;
overflow:hidden;
}
JS (included scroll.js)
$(document).ready(function() {
"use strict";
$('#amfCont').perfectScrollbar();
});
Can anyone point out what do I have wrong here?
Try jQuery Scrollbar in your iframe.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Scrollbar Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="http://gromo.github.io/jquery.scrollbar/jquery.scrollbar.css">
<script src="//code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://gromo.github.io/jquery.scrollbar/jquery.scrollbar.js"></script>
<script>
jQuery(function($){
$('.page-wrapper').scrollbar();
});
</script>
<style type="text/css">
html, body, .page-wrapper {
border: none;
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
.page-content {
padding: 10px 20px;
}
</style>
</head>
<body>
<div class="page-wrapper scrollbar-macosx">
<div class="page-content">
[CONTENT HERE]
</div>
</div>
</body>
</html>
In example above I've used scrollbar-macosx class, but you can choose any from predefined styles or make your own custom scrollbar - it's fully CSS customizable.
#amfCont needs a height property for this plugin to work. Here's the example from the docs.
#container {
position: relative;
height: 100%; /* Or whatever you want (eg. 400px) */
}