Constantly update a div's content to another div - javascript

I have a div (.bx-caption) in which the text changes based on the title attribute of a selected image in a slider.
I'm trying to copy the text from this div to another div, and always have them be matching.
I'm using:
$(document).ready(function(){
$('.screenTitle').html($(".bx-caption").html());
});
This code works to match the text when the site loads, but whenever I change images in the slider and .bx-caption switches to a new title, .screenTitle doesn't pick up on it and stays the same.
What can I do to ensure that .screenTitle always matches .bx-caption?
Thanks in advance to anyone who helps out.
Update: the HTML looks like this:
<ul class="bxslider">
<li><img src="images/1.png" title="Funky Roots" /></li>
<li><img src="images/2.png" title="Little Toots" /></li>
<li><img src="images/3.png" title="Epic Loots" /></li>
</ul>
</div>
<div class="outside">
<div class="screenTitle"></div>
<div id="slider-prev"></div> <div id="slider-next"></div>
</div>
Here is a JSFiddle trying to attempt the above:
jsfiddle.net/uwA3Q/2/

Document.ready fires only once when you load the page.
who ever changing the slider put your code over there
$('.screenTitle').html($(".bx-caption").html());
for example if you have a click handler that changes the slide
$('#mySlide').on('click', function(){
//do the changing of the slide
//also update the title here
$('.screenTitle').html($(".bx-caption").html());
})

If you are using bxslider add onSlideAfter callback to change screen title:
$('.bxslider').bxSlider({
// ......
onSlideAfter: function($slideElement) {
// get .bx-caption element of current slide
$('.screenTitle').html($slideElement.find('.bx-caption').html());
}
});
http://jsfiddle.net/DQadF/2/

Related

AJAX Blocks Image Slider from Working

I am working a menu bar on a webpage. the menubar is based on an image library called Jcoverflip(<=You will find a demo here). The Image Slider works perfectly. That is until I start trying loading in content from different HTML's using AJAX technique.
When I flip a logo displayed in the top of the above image. Then it indeed does load the content from the other HTML's AJAX style. However the Jcoverflip slider does not work anymore.
Main.html
<div id="mycontainer">
<div id=w rapper>
<ul id="flip">
<li>
<img href="home" src="Logo.png" />
</li>
<li>
<img href="product" src="Product.png" />
</li>
</ul>
</div>
</div>
<div id="content"></div>
product.html
<img id="contact1" src="Contact.png">
MainMenu.js
jQuery( document ).ready( function(){
$("#content").load("home.html");
$("ul#flip li img").click(function(){
var page = $(this).attr("href");
$("#content").load(page + ".html");
return false;
});
});
when you click the product logo in the slider then the img of prouct.html will indeed load as intended but the slider does not slide to the product logo. the slider is now frozen.
here is a fiddle for more code. https://jsfiddle.net/qvgadgv4/
the fiddle doesn't work since you need Jcoverflip.
Is there anyone who can help me understand why using AJAX blocks my image slider from working? And come up with a solution to make it work with AJAX.
Well i still don't know why this Ajax method blocks my slider from working but I by chance found a solution.
You should ID your img instead of href.
<div id="mycontainer">
<div id= wrapper>
<ul id="flip">
<li><img id="home" src="Logo.png" /></li>
<li><img id="product" src="Product.png" /></li>
</ul>
</div>
Then load the content like this instead
$("#home, #product, #submit2").click(function(){
if(this.id == "home"){
$("#content").load("home.html");
}
if(this.id == "product"){
$("#content").load("product.html");
}
});
This will load the content into the div of the main html and the slider will work at the same time.

Image slider not loading properly

This is the html for my website. I would like to add this image slider:. I have one problem, for some reason all I get is 4 bullet point and a error img picture next to it. Could you look at my html and see what you could do to help.
-Thanks
http://jsfiddle.net/lasquish/hL7vLcd5/
<div class="container">
<ul class="slider">
<li><img src="/images/Day1.jpg" /></li>
<li><img src="/images/Day1.jpg" /></li>
<li><img src="/images/Day1.jpg" /></li>
<li><img src="/images/Day1.jpg" /></li>
</ul>
</div>
This is the Script:
<script src="js/jquery.bxslider.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src = "js/bootstrap.js"></script>
<script>
$(document).ready(function(){
$('.bxslider').bxSlider();
});
</script>
Since you have wrapped slide content with .slider class you need to do following changes
$(document).ready(function(){
$('.slider').bxSlider();
});
Call bxslider.min.js after jQuery library
Also you have call 2 different version of jQuery library. this will make conflict.
You need to add below css to remove bullet
ul
{
list-style-type: none;
}
Need to use correct image path or you can use full image "http://fiddle.jshell.net/img/logo.png"...
As you have not shared all required file here ..so we unable to test at our end. Please share js library file which you have include here if problem no solve.

how to style bxslider image slider?

Having some trouble here styling my bxslider image slider. It also does not appear that it's taking whatever styles I've tried to give it, in the first place - but theres also the "prev" and "next" text links that i dont want either.
any chance someone can help trouble shoot where I need to make changes to style this to look more like this! --> http://danielmdesigns.com/windermere/images/sliderexample.png
Let me know if you need something else, but to see this live, please visit http://www.danielmdesigns.com/windermere/index.html and my HTML CSS and JS are below as well;
HTML
<ul class="bxslider">
<li><img src="images/imagescroll_1.png" /></li>
<li><img src="images/imagescroll_1.png" /></li>
<li><img src="images/imagescroll_1.png" /></li>
<li><img src="images/imagescroll_1.png" /></li>
</ul>
CSS
.bxslider{
height:600px;
width:auto;
background-color:#c41230;
background-size:cover;
position:relative;
top:95px;
}
and my JS above the end body tag;
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
mode: 'fade',
captions: true,
auto: true,
autoControls: false
});
});
</script>
i really just need this to be full width with only the pager dots showing, positioned on top of my slider... any and all help is appreciated.
Make sure to declare your custom CSS after you import the default .bxslider css file. That way you can override the defaults.

How to make javascript load faster?

Right now, we have a slideshow of images that uses javascript. However, when the page is still loading, the images would be briefly shown in a normal listed style (with bullets) before the javascript gets read and executed. Problem is, we don't want visitors to see the "naked" image list, even just briefly (sometimes it would last 2-3 seconds). We want them to immediately see just one image (not a list) that morphs into another (what the js does).
This is the html code for the slideshow:
<div class="slideshow">
<ul>
<li><img src="images/....jpg" /></li>
<li><img src="images/....jpg" /></li>
<li><img src="images/....jpg" /></li>
<li><img src="images/....jpg" /></li>
<li><img src="images/....jpg" /></li>
</ul>
</div>
This is the slideshow that we used:
http://www.littlewebthings.com/projects/blinds/
and this is the JS file:
http://www.littlewebthings.com/projects/blinds/js/jquery.blinds-0.9.js
I am thinking that this may be a cache problem as the demo slideshow above only showed the "naked" image list once. Once it is refreshed/re-visited, it no longer shows (or still shows but a lot faster than the first time that it's almost unnoticable). Ours, on the other hand, keeps on re-reading the javascript as if it's always the first time (if you know what I mean).
hide all list with css and only show the first one image. So user wont see all the list apart from first image.
Although this doesn't directly answer the question of getting it to load instantly, one option would be to start with your div hidden with <div class="slideshow" id="myId" style="visibility: hidden">, and then as soon as you know your JS has loaded, show it (e.g. using jQuery):
$( "#myId" ).css( "visibility", "visible" );
Try edit the ul style this way:
ul{
list-style:none;
}
ul li{
position:absolute;
}
The list wrapper must have a fixed height ;)
Hope it helps

How do I auto-reload a section of the page with jQuery without refreshing entire page?

So there are a few things I want to do. I have a section of HTML that I would like to be displayed on the page by default (i.e. the first time it loads).
<div class="viewport">
<ul class="overview">
<li><img src="images/1.png" /></li>
<li><img src="images/2.png" /></li>
<li><img src="images/3.png" /></li>
<li><img src="images/4.png" /></li>
<li><img src="images/5.png" /></li>
<li><img src="images/6.png" /></li>
<li><img src="images/7.png" /></li>
</ul>
</div>
However, upon clicking an icon I would like for this section to be reloaded as a snippet of javascript is updated.
The code for the icon is:
<img src="images/2.png" id="icon#2"> |
<img src="images/3.png" id="icon#3"> |
<img src="images/4.png" id="icon#4"> |
The JS snippet that is updated is:
var win_width = $(window).width();
var num_of_images = 2; // This should be changed to 3, when 3 is clicked, and 4 when 4 is clicked, etc.
So it should reload the 'viewport' div on the page only...not the entire page.
Thoughts?
$(function () {
var num_of_images = 2,
showAndHide;
$("img[id^=icon]").bind("click", function () {
num_of_images = parseInt(this.id.replace("icon#", ''), 10);
showAndHide(num_of_images);
});
(showAndHide = function (n) {
$("ul.overview").hide() // hide this while we "do work"
.children() // get children
.show() // show all children
.filter(":nth-child(" + n + ") ~ li") // get the next siblings of the nth child
.hide() // hide them
.end()
.end()
.show(); // show the parent list
})(num_of_images)
});
This is a "pending" solution. I have not tested this and I would be surprised if it works.
EDIT: Alright, I tested and fixed a few things and this seems to work.
Note that I attached a click handler to those img elements. So you don't need those anchor tags if you don't want them.
IF you are looking to reload just a portion of the page with HTML content (no added JavaScript) then you could use .load().
$('div#content').load('morecontent.php');
You want $('.viewport').load('/url') to replace the viewport' contents with the new chunk of HTML return from the server from /url. You call that load function once when the page loads, and again any time you want to replace the contents of viewport. You might want to do some include type magic in whatever template language you're using to make it so that you can skip the initial load and render the initial page in one request instead of 2. You trigger the load function in a change event or other kind of event on your page.

Categories