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..
Related
I am trying to change the background color of a button in css. The CSS link is working fine, the button changes color when I try to apply bootstrap or use DOM to change the color, but not when I use CSS.
Here's the code:
// let sexybutton= document.querySelector('.sexy');
// sexybutton.style.backgroundColor="red";
// console.log(sexybutton.style);
//Currently commented it out because I do not want to do it this way. Put this here to inform that the button style changes using this method.
.body{
background-color:#CCD6A6
};
.sexy{
background-color: red
};
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.0">
<title>Document</title>
<script src="https://kit.fontawesome.com/fdee82af88.js" crossorigin="anonymous"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/album/">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
<!-- Bootstrap core CSS -->
<link href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link rel="stylesheet" href="style.css">
</head>
<body class="body" >
<button class="sexy" type="submit">Click this</button>
</body>
<script src="index.js"></script>
</html>
Your CSS syntax is wrong. The semi-colon ; must be placed after each CSS property, not after each CSS rule.
.body{
background-color:#CCD6A6;
}
.sexy{
background-color: red;
}
<!-- Bootstrap core CSS -->
<link href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet">
<body class="body" >
<button class="sexy" type="submit">Click this</button>
</body>
CSS isn't a C/C++ or anything else that requires semicolon. You can't type a semi-colon to end of the style.
You wrote;
.body{
background-color:#CCD6A6
};
.sexy{
background-color: red
};
but this is correct one;
.body{
background-color:#CCD6A6;
}
.sexy{
background-color: red;
}
You must to write semicolon to end of the line. As you can see, line ending with : red;. Not like };
it's unreadable, your semi-colon placement is not correct
.body{
background-color:#CCD6A6
};
.sexy{
background-color: red
};
correct
.body{
background-color:#CCD6A6;
}
.sexy{
background-color: red;
}
Let's say I have 4 pages, by default the "MAIN" text is the first item inside the slick and it is active. What I want to happen is when I click the "PAGE 1 HTML" or any other page links inside that slick. That text links will now be the first item and it is active on page load.
Is it possible to be dynamically added on my script.js rather than set the slickGoTo/initialSlide on each pages to target the current page. I'm not sure if the events selector.on('click') then trigger the slickGoto will help.
Below is my partial code and also here is the complete sandbox code https://codesandbox.io/.
See also my images example below.
/*script.js*/
$(function () {
$(".slick-category--lists").slick({
slidesToShow: 2,
slidesToScroll: 1
});
});
/*styles.js*/
.slick-next,
.slick-prev {
background: blue;
}
.slick-prev {
left: 0;
}
.slick-next {
right: 0;
}
.slick-category--lists {
padding: 0 30px;
}
.slick-current a {
color: red !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<link
rel="stylesheet"
href="https://getbootstrap.com/2.3.2/assets/css/bootstrap.css"
/>
<link
rel="stylesheet"
href="https://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css"
/>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<ul class="slick-category--lists">
<li>MAIN</li>
<li>PAGE 1 HTML</li>
<li>PAGE 2 HTML</li>
<li>PAGE 3 HTML</li>
</ul>
<div style="padding: 50px;">MAIN content...</div>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://getbootstrap.com/2.3.2/assets/js/bootstrap-modal.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Here is the main page.
Other pages should be like this, pages text links inside slick will be the first item on page load and active.
Updates:
Codesandbox have been updated and I just put slickGoTo methods on each page to achieve what I want. But I'm still looking for the possibilities to achieve it dynamically on script.js.
Here is my index.html file
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>title</title>
<meta name=viewport content="width=device-width, initial-scale=1">
<meta http-equiv=X-UA-Compatible content="IE=edge">
<link href=assets/css/elegant-icons.min.css rel=stylesheet type=text/css media="all"/>
<link href=assets/css/bootstrap.css rel=stylesheet type=text/css media="all"/>
<link href=assets/css/theme.css rel=stylesheet type=text/css media="all"/>
<link rel=stylesheet type=text/css href="assets/css/style.css"/>
</head>
<body>
<div id="inc"></div>
<div class=main-container>
<section class="no-pad coming-soon fullscreen-element">
</section>
</div>
<script src=assets/js/jquery.min.js></script>
<script src=assets/js/bootstrap.min.js></script>
<script src=assets/js/smooth-scroll.min.js></script>
<script src=assets/js/scripts.js></script>
<script>
$(function(){
$("#inc").load("header.html");
});
</script>
</body>
</html>
If I copy-paste the content of header.html page after the body, then everything works fine.
when I tried to include the header.html page using .load() function then the CSS won't work properly.
Here is the online sample codepen
if I include the content of div="inc" from an external file like header.html than drop-down menu will overlap each other.
Hope this helps.
Your scripts.js file contains
$(window).load(function(){
"use strict";
// Align Elements Vertically
alignVertical();
alignBottom();
$(window).resize(function(){
alignVertical();
alignBottom();
});
// Isotope Projects
});
The scripts.js file you have provided is trying to add some styling to the header.html.
but it's not doing the expected behaviour because the scripts.js file is loading before the header.html file.
Just add this at the end after your header content
<script src=assets/js/scripts.js></script>
This will let the header.html content load first and than scripts.js
Also here is the github repo code structure
https://github.com/siddhartharora02/jsLoad
Try this
<link href="../assets/css/elegant-icons.min.css" rel="stylesheet" type="text/css" media="all"/>
<link href="../assets/css/bootstrap.css" rel="stylesheet" type="text/css" media="all"/>
<link href="../assets/css/theme.css" rel="stylesheet" type="text/css" media="all"/>
<link rel="stylesheet" type="text/css" href="../assets/css/style.css"/>
<script src="../assets/js/jquery.min.js"></script>
<script src="../assets/js/bootstrap.min.js"></script>
<script src="../assets/js/smooth-scroll.min.js"></script>
<script src="../assets/js/scripts.js"></script>
For your original issue,
If you want to include html content dynamically, here is a method to do it,
HTML,
<link data-include="includes/header.html">
JS,
$('link[data-include]').each(function(){
var el = $(this),
template = $(this).data('include');
$.get(template, function(data){
$(el).replaceWith(data);
});
});
Hope this will help!
Try this,
Now you can include any partial content as you want.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>title</title>
<meta name=viewport content="width=device-width, initial-scale=1">
<meta http-equiv=X-UA-Compatible content="IE=edge">
<link href=assets/css/elegant-icons.min.css rel=stylesheet type=text/css media="all"/>
<link href=assets/css/bootstrap.css rel=stylesheet type=text/css media="all"/>
<link href=assets/css/theme.css rel=stylesheet type=text/css media="all"/>
<link rel=stylesheet type=text/css href="assets/css/style.css"/>
</head>
<body>
<link data-include="header.html">
<div class=main-container>
<section class="no-pad coming-soon fullscreen-element">
</section>
</div>
<script src=assets/js/jquery.min.js></script>
<script src=assets/js/bootstrap.min.js></script>
<script src=assets/js/smooth-scroll.min.js></script>
<script src=assets/js/scripts.js></script>
<script>
$(function(){
$('link[data-include]').each(function(){
var el = $(this),
template = $(this).data('include');
$.get(template, function(data){
$(el).replaceWith(data);
});
});
});
</script>
</body>
</html>
Try using like this,
$(document).ready(function() {
$.get('header.html').success(function(data){
var headerHTML = data;
$('#inc').html(headerHTML);
});
});
How about this:
Instead of using a load method, use an iframe
<iframe id="inc" src="header.html" style="border:0; overflow:auto;"></iframe>
Edit
<iframe id="inc" src="header.html" class="hidden"></iframe>
css
iframe.hidden {
padding: 0;
margin: 0;
border: 0;
overflow: auto;
display: hidden;
}
iframe.hidden.load {
padding: 0;
margin: 0;
border: 0;
overflow: auto;
display: block;
}
JS
!!! Here trigger means the trigger when you want it to load such as onClick, onMouseover, etc !!!
Requires jQuery
$('iframe.hidden').trigger(function() {
$(this).addClass('load');
});
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) */
}
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