I am trying to create a slideshow with an onload event through a separate JS file. I've tried looking for possible solutions online and all of them require the coding to be all in one file. What would be the best way to approach this issue?
I have attached my HTML coding for the JS reference.
<div class="slideshow-container">
<div id="slideshow">
<div class="numbertext">1 / 5</div>
<img src="images/LakeYellowstoneSunset.jpg" height="408px" width="616px"/>
<div class="text">Yellowstone National Park<div>
<div class="numbertext">2 / 5</div>
<img src="images/SanMural.jpg" width="408px" height="616px"/>
<div class="text">San Francisco, CA</div>
<div class="numbertext">3 / 5</div>
<img src="images/SanJelly.jpg" height="408px" width="616px"/>
<div class="text">San Francisco Aquarium</div>
<div class="numbertext">4 / 5</div>
<img src="images/AKGold.jpg" height="408px" width="616px"/>
<div class="text">Alaska Yukon</div>
<div class="numbertext">5 / 5</div>
<img src="images/SaltLake.jpg" height="408px" width="616px"/>
<div class="text">Salt Lake City, UT</div>
</div>
</div>
I'm not exactly sure what you are asking since you didn't give us the JS code you are working with. I am assuming you only want 1 image displayed and we should start cycling through the images after the web pages loads.
I updated your HTML slightly and added JS code to do this in the below codepen/
http://codepen.io/anon/pen/WopMzb
I updated your "slide" html to the be wrapped in a div so we can easily hide/show the "slide"
<div class="slide active">
<div class="numbertext">1 / 5</div>
<img src="images/LakeYellowstoneSunset.jpg" height="408px" width="616px"/>
<div class="text">Yellowstone National Park<div>
</div>
This will only show 1 "Slide" at a time and will change the slide every 3 seconds.
For future questions it may be best to create a codepen or something similar with the CSS/JS/HTML that you are having trouble with. You are more likely to receive a response if it is easier for someone to debug.
"All of them require the coding to be all in one file". That's false. There is no difference, how you include, for example, Javascript code for your HTML:
Creating separate js file and include it via script tags like this (in your HTML):
<script src="yourFile.js"></script>
Or you include all the Javascript logic in your HTML like this:
<script>
// Your Javascript logic here
</script>
Your html structure reminds me of bootstrap's carousel option. If you don't mind adding bootstrap to your project it might be worth a look:
Bootstrap carousel
Added bonus is that you don't have to write anything custom for your slideshow control.
Related
OK so I am trying to build my own website using HTML templates and well i created a few additional pages of my own to incorporate to the template however and I linked them together well i thought i did and when i click the button linked to my created pages it does nothing it does not even refresh the page.
ill put a snippet of the part of the code i have problems with
<div class="col-lg-4 course_col">
<div class="course">
<div class="course_image"><img src="images/Physics.png" alt=""></div>
<div class="course_body">
<div class="course_title">Physics</div>
<div class="course_info">
<ul>
<li>Edward Nkadimeng</li>
<li>Grade 12</li>
</ul>
</div>
<div class="course_text">
<p>Physics Curriclum.</p>
</div>
</div>
</div>
</div>
I'm making a project, it's a website that list some events, here its preview:
https://i.imgur.com/yo20mTo.jpg
I can modify the html and css and post more events like the image above, but it's not practical if I have to alter the html every single time I want to post an event or update it.
Is there any way to make a script to do it? Like a page where I just put things like event name, date, a image and stuff, and it generate an event like in the image above?
To be more specific, an script that makes this just by typing the information I want:
<div class="item active">
<img class="img-responsive" src="imagens/aero.jpg" alt="Image">
<div class="carousel-caption">
<h3>Aerosmith em São Paulo</h3>
<p>Mais informações</p>
</div>
</div>
Like a form that it automatcly creates it:
<div class="item active">
</div>
</div>
Then i put an image:
<div class="item active">
<div class="item active">
<img class="img-responsive" src="imagens/aero.jpg" alt="Image">
<div class="carousel-caption">
</div>
</div>
and then some info about it:
<div class="item active">
<img class="img-responsive" src="imagens/aero.jpg" alt="Image">
<div class="carousel-caption">
<h3>Aerosmith em São Paulo</h3>
<p>Mais informações</p>
</div>
</div>
and finally i post it and it gets like the image above.
You are talking about building a CMS. You may want to build your own, which can be fun, but likely you will want to use something that already exists and is easy to host. One easy to use example would be Wordpress.
Alternatively you could look at a static site generator (such as hugo), which will generate html pages for you on your computer, which you can then upload to your hosting provider.
If you go the Hugo route, you will have to create a page template for each event, and then make a data file (it can use several formats like json or yml) which contains the data for every event.
I tried to search for this topic with no luck.
I want to display content in my webpage in multiple rows and with each row, I want to have next and back buttons when the contents are more than the page width.
A good example is Youtube
I found good toturials about carousel, but I am not really looking for carousel or at least it doesn't look like what I am looking to implement.
I hope that I was able to explain my question
I did something quite similarly in the past, I will try explain how I did it.
Firstly, here is the js fiddle:
https://jsfiddle.net/VoidZA/fxudjony/
It is something around the lines of:
<div class="container-holder">
<div class="click-prev nav-button">Prev</div>
<div class="outsideViewBefore container">Container Before</div>
<div class="inView1 container">Container 1</div>
<div class="inView2 container">Container 2</div>
<div class="inView3 container">Container 3</div>
<div class="inView4 container">Container 4</div>
<div class="inView5 container">Container 5</div>
<div class="outsideViewAfter container">Container After</div>
<div class="click-next nav-button">Next</div>
</div>
edit final:
Fixed up the code, and put an example into jsFiddle
I have a this problem:
I use a jquery plugin fullPage.js by Alvaro Trigo on my website. The plugin script automatically inserts the html structure in certain elements... in my html I have:
<div class="section fp-auto-height-responsive" id="slider-section">
<div class="slide" id="co-delame-section">
<div class="slide-wrapper">
...
</div>
</div>
</div>
And when the page is loading, javascript generates extra html tags and css, so it looks like:
<div class="section fp-auto-height-responsive fp-section active fp-completely" id="slider-section" data-anchor="About" style="height: 638px;">
<div class="fp-slides">
<div class="fp-slidesContainer" style="width: 100%;">
<div class="slide fp-slide fp-table active" id="co-delame-section" style="width: 100%;">
<div class="fp-tableCell" style="height:638px;">
<div class="slide-wrapper">
</div>
</div>
</div>
</div>
</div>
</div>
I want to append more slides (slide class) for a certain page resolution, so that when user is on mobile with smaller screen, the extra slides won't load.
I do it with this javascript code:
$.get("http://marketingo.cz/wp-content/themes/twentysixteen-child/slider_cs.html", function (data) {
$("#slider-section").append(data);
});
And there is the problem... it works in about 50% page loads, the problem is that sometimes it appends the slides after the fullPage generates the structure, so that the appended slides are out of the slider structure... like this:
<div class="section fp-auto-height-responsive fp-section active fp-completely" id="slider-section" data-anchor="About" style="height: 638px;">
<div class="fp-slides">
<div class="fp-slidesContainer" style="width: 100%;">
<!-- the right place of a slide -->
<div class="slide fp-slide fp-table active" id="co-delame-section" style="width: 100%;">
<div class="fp-tableCell" style="height:638px;">
<div class="slide-wrapper">
</div>
</div>
</div>
</div>
</div>
<!-- appended slides out of slider blocks -->
<div class="slide" id="jsme-partner">
</div>
<div class="slide" id="vase-problemy">
</div>
</div>
So it looks the fullPage.js script runs before the slides are appended, but in the html head tag I firstly put the script to append the slides and fullPage is loaded after...
But what is really weird is that sometimes it loads correctly, sometimes not. Clearing the cache on refresh helps sometimes, but I can't say if there is any pattern with deleting the cache.
You can check it on http://marketingo.cz/en/?stack-overflow#About and give it a few refreshes with cache clearing to see...
The questions is - how can I ensure that the html is appended before the fullPage plugin modifies the code so that the appended sliders will be in a same container?
Thanks for a help! :)
Easy.
Just initialice fullPage.js after you append the slides by using the $.get callback.
$.get("http://marketingo.cz/wp-content/themes/twentysixteen-child/slider_cs.html", function (data) {
$("#slider-section").append(data);
//initialice fullPage.js here:
$('#fullpage').fullpage();
});
I'm currently building a website and have an image as the header, but when I load the page it will jump half way down the page, load the image and then jump back up. How can I make the image load in first to prevent it from jumping?
HTML:
<div class="refocus" id="hero-header">
<div class="refocus-img-bg"></div>
<div class="refocus-img focus-in">
HTML:
</div>
<div class="refocus-text-container">
<div class="t">
<div class="tc">
</div>
</div>
</div>
</div>
<div class="row">
<div class=".col-md-6">
<div id="section1">
<div id = "sub-text">
<h1>Hello</h1>
<br>
<h2>Hello</h2>
<h3><br>Hello.</h3>
</div>
<div id="image">
<img src="images/aboutme.png"/>
</div>
</div>
<div id="buttoncontainer">
<div id="totimeline">▼</div>
</div>
</div>
</div>
Here's a JSFiddle to replicate this.
Thank you in advance.
You can do one of two things for this.
1) Set the dimensions of your image inline. This is actually a recommended method of preventing the very thing you are experiencing where the page jumps around after images load in. By setting the dimensions inline, the browser will already know how tall the image needs to be and will reserve the space for it before it even finishes loading in.
Example:
<img src="http://placehold.it/350x150" height="150" width="350">
2) If you don't prefer to set the dimensions inline, it seems you could also just set the height in your styles ahead of time and that would do the trick as well.
Example:
.refocus-img{
height:150px;
}