Replacing static background image with simple j Query slideshow - javascript

I'm busy building a website and have a banner in it. The banner consists out of a static background image with static text overlay.
Now I want to keep the banner with the text overlay, but replace the static background image with a simple slideshow. The images should be replaced every 3 seconds. It should be a continuous loop, triggered on page load event. This function should utilize jQuery.
This is the html code for the banner as it is at the moment:
<!--BANNER HTML-->
<div class="banner">
<div class="banner-text">
<h1>LONG LAYOVER?</h1>
<h1>Is Amsterdam Schiphol your transfer hub?</h1>
<h4>Make the most of your layover by doing some sightseeing!<br>Tailored according to the length of your layover</h4>
</div>
</div>
This is the CSS:
.banner h1, .banner h1, .banner h4 {
margin: 0;
text-shadow: 2px 2px 6px #000;
text-align: center;
}
.banner {
color: white;
background: url(images/bannerimage.png) top left/cover no-repeat;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
}
Does anybody have a smart solution to my problem?

The simpliest answer comes to my mind is defining functions and call them in timeout functions as shown in the DEMO here
You can also use togglaClass instead of .css() function. I would prefer toggleClass but just did this was is quicker for me.

Related

Use classList.toggle on external CSS

So I've been messing around with JS, and I wanted to make a dark theme toggle button as seen here.
However, that tutorial only shows how to make it work with the <style> tag in HTML, not using an external CSS file.
How could I make it toggle the class .d_theme from an external CSS file?
No difference between external and internal CSS when you use JS to toggle
document.getElementById("chk").addEventListener("change",function() {
document.getElementById("x").classList.toggle("mystyle",this.checked)
})
/* This can be in an external file */
.mystyle {
width: 100%;
padding: 25px;
background-color: coral;
color: white;
font-size: 25px;
box-sizing: border-box;
}
<label><input type="checkbox" id="chk">Change theme</label>
<div id="x">Here is some text</div>

Different directory to load function

I'm using jQuery load function to replace iframe basically, since it loads only the section better.
It's working fine but the image is having problem since the directory of the image is placed inside about.php page, and i'm trying reaching it from folder/editor.php.
About.php directory - images/img.jpg
Editor.php directory - ../images/img.jpg
Editor.php - Notice I have tried to use different directory on this page.
<style>
.content-page .hero {
height: 250px;
background-image: url("../images/header-background.jpg");/*url("/images/headers/header-background.jpg");*/
background-repeat: no-repeat;
background-size: cover;
display: flex;
justify-content: center;
flex-direction: column;
}
</style>
<div id="iframe"></div>
<script>
$('#iframe').load('../about.php #content');
</script>
About.php
<div id="content">
<style>
.content-page .hero {
height: 250px;
background-image: url("images/header-background.jpg");/*url("/images/headers/header-background.jpg");*/
background-repeat: no-repeat;
background-size: cover;
display: flex;
justify-content: center;
flex-direction: column;
}
</style>
<!-- Content goes here -->
</div>
How can I change css image source attribute after load function goes into action?
You actually did two questions: how to change the style, and how to do it after $.load executed. About the first one, there are several ways. About the second, you could use the callback argument, the third $.load argument.
From the code you posted it seems you actually don't want to change the background image, it seems you want to keep the same, simply you have some problems due to the directories.
The cleanest solution would be to write a .css file and include it in both the pages rather than to spread <style> elements in your pages with identical content.
Another solution could be to use absolute paths rather than relative paths: /images/header-background.jpg (if your image directory is in the root of your web server) rather than images/header-background.jpg or ../images/header-background.jpg.
If you strictly need to keep this architecture changing your About.php as follows could be another possible solution.
<style>
.content-page .hero {
height: 250px;
background-image: url("images/header-background.jpg");/*url("/images/headers/header-background.jpg");*/
background-repeat: no-repeat;
background-size: cover;
display: flex;
justify-content: center;
flex-direction: column;
}
</style>
<div id="content">
<!-- Content goes here -->
</div>

Not sure how to specify a style from a copied HTML5, CSS, JS

I have been slowly pulling apart an HTML5 template and have copy pasted a parallax section below several times on the same page As I have copied this 3 times for the parallax effect I also have the same background image as defined in the main.css
/* ==========================================================================
Counter Section Style
========================================================================== */
.counters {
background: url(../img/bg1.jpg) fixed;
position: relative;
}
.counters .facts-item {
text-align: center;
color: #fff;
}
.counters .facts-item .icon {
margin-bottom: 20px;
}
.counters .facts-item .icon i {
font-size: 50px;
color: #fff;
}
.counters .facts-item .fact-count h3 {
font-size: 35px;
color: #fff;
margin-bottom: 15px;
}
.counters .facts-item .fact-count h4 {
font-size: 20px;
color: #fff;
<div class="counters section" data-stellar-background-ratio="0.5">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3 col-lg-3">
<div class="item-boxes wow fadeInDown" data-wow-delay="0.2s">
<!-- <div class="icon">
<i class="lnr lnr-pencil"></i>
</div> -->
<a class="nav-link" href="#video-area">
<h4>SaaS Assurance</h4></a>
<p></p>
</div>
</div>
The problem I have is that even though I have copied them, I would still like them to be their own sections with different backgrounds and with my limited experience on Web Dev I am not sure how class .counters from CSS which is defining the image I want to change is being picked up by the code which says counter section
Thanks all
In CSS, Classes can be used more than once, so if you copy the parallax section three times, then there should be three parallax section with the same background as declared by .counters which is used by every of your parallax section.
To make sure that every of those 3 parallax section won't use the same background, try to use ID instead as ID's can be only used once and must have a unique name.
When an ID and classes is used together, the ID attributes should override any declarations made by any classes used in the element. In this case, you can give an ID that contain an individual background property for every of your parallax section ( something like #parallax-section1, 2, and more ), so .counters's background declaration will override.
Further reading :
CSS Selectors by MDN Web Docs.
Override Class Declarations by Styling ID Attributes by FreeCodeCamp.
Note: When copy pasting an HTML element, make sure you do select from the starting bracket till the closing ones.
thanks for all the responses. I found the issue that the class .counters was actually calling the image from class counters section from the code above, it must have just been ignoring the space and the section confused me :)

Responsively select compact or normal sized google recaptcha

As per the title looking for help to be able to responsively have Google recaptcha change from the data-size="compact" to data-size="normal" at 768px. Is it possible without javascript?
Captcha HTML:
<div class="captcha_container">
<div class="g-recaptcha" data-sitekey="6Le8iBkTAAAAzeCvzZRO3FePZO" data-size="compact">
</div>
</div>
CSS:
.captcha_container{padding: 20px 0px 0px 0px; text-align: center;}
.g-recaptcha{ display: inline-block;}
You can't change the data-size without using javascript, however if you'd like, you can change the scale to conform to new screen widths.
example:
.g-recaptcha {
-webkit-transform:scale(0.77);
-ms-transform:scale(0.77);
transform:scale(0.77);
-webkit-transform-origin:0 0;
-ms-transform-origin:0 0;
transform-origin:0 0;
}
Someone has asked this previously, there were some interesting answers here:
https://stackoverflow.com/a/29521983/6049581

Have column extend to bottom of browser with an empty header

<div id="content">
<div id="header">
</div>
<div id="main-content">
</div>
</div>
html, body{height:100%;margin: 0px; padding: 0px; background-color: black;}
div#content{width:600px; margin: 0 auto; height:100%;}
div#header{width:600px; height:200px;}
div#main-content{width:600px; height:100%; background-color: white;}
As you can see, adding a header pushes everything down. I want main-content to extend to the end of the browser.
I think i worked around this issue before by creating a header with an image similar to my background in order to fake the appearance, however my background i'll be using is much too complicated.
Are there any methods to do this? possibly a working javascript fix?
You can make your main-content div positioned absolutely and then specify its top and bottom attributes. I've setup a jsfiddle here: http://jsfiddle.net/wrn8Y/1/
div#main-content{
position: absolute;
top: 200px;
width:600px;
bottom: 0px;
background-color: white;
}
Note that the top attribute is set to the bottom of your header, and the bottom is set to zero to hit the bottom of the page. If you wanted to have a footer you could change the bottom attribute to accommodate the footer.
Also you can do this with javascript, I generally use JQuery so here is some JQuery code that gets it done:
$('div#main-content').height($(document).height() - $('div#header').height());
This javascript (Jquery) will work with relatively positioned divs and the only css you would need to change is to remove the "height: 100%" on the "div#main-content" style.

Categories