I'm having a problem with Jcarousel where i need to have a divs text changing when the next button is pressed on the carousel. I have the carousel set up and working how i want, scrolling one item at a time:
jQuery(document).ready(function() {
jQuery('.mycarousel').jcarousel({
scroll : 1
});});
<li> <img src="img/slider/slide1.gif" alt="slide1" /></li>
<li> <img src="img/slider/slide2.gif" alt="slide1" /> /li>
<li> <img src="img/slider/slide3.gif" alt="slide1" /> /li>
Now i want to append the the text inside a div when the next button is pressed i know Jcarousel has the itemFirstInCallback: function but I'm totally lost on how to use this to append a divs text:
<div class="copy">
<p>
example text
</p>
</div>
Any ideas?
Thanks,
Liam
Related
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.
I have one div "upload" where various images are displayed and each image has an remove option which if clicked on hides the image.
I need to show the particular hidden images in below deleted section.
HTML
<div id="upload">
<a href="javascript:void(0);" onclick= remove()> Remove </a>
<img src="pic1.jpg">
</div>
<div id="deleted">
</div>
JS
function remove(){
$("upload").hide();
}
If I click on remove option in div "upload" then I need to hide that image and simultaneously show that image in div "deleted".
I've done some changes your original code.
HTML
<div id="upload">
<a>Remove</a> <img src="pic1.jpg" />
<a>Remove</a> <img src="pic2.jpg" />
<!-- etc. -->
</div>
<div id="deleted"></div>
JS (with jQuery)
$(function() {
$("#upload a").click(function(e) {
$(this).next("img").appendTo($("#deleted"));
$(this).remove();
});
});
By using jQuery, you can dynamically bind the click event to every a inside #upload. Then, relatively to the clicked a, find the next img, append it to #deleted (with appendTo), and finally delete the clicked a.
Here I have a sample JSFiddle http://jsfiddle.net/x3f6L9re/ with a demonstration how the problem can be solved.
Since you're intending to use jQuery, please don't add the function call in the HTML.
This line:
<a href="javascript:void(0);" onclick= remove()> Remove </a>
is thus obsolete. I used the tag button instead of a, which fits better here.
My code would be:
HTML
<div id="upload">
<figure>
<button type="button" role="button">Remove</button>
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/9/9e/JQuery_logo.svg/524px-JQuery_logo.svg.png" alt="Image">
</figure>
<figure>
<button type="button" role="button">Remove</button>
<img src="https://upload.wikimedia.org/wikipedia/commons/d/d3/Crystal_source.png" alt="Image">
</figure>
<figure>
<button type="button" role="button">Remove</button>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/ca/AngularJS_logo.svg/695px-AngularJS_logo.svg.png" alt="Image">
</figure>
</div>
<div id="deleted">
</div>
I enclosed every image in a tag figure for better demarcation.
CSS
#upload, #deleted, figure {
border: thin solid black;
}
Adding border for visualisation of the effects.
And here is the jQuery:
JavaScript
$('button').click(function () {
$('#deleted').append($(this).next());
$(this).next().hide();
$(this).hide();
$(this).parent().css('border', 'none');
});
When a button is clicked its next sibling, which is the image, is appended to the div with id="deleted". Then the next sibling of the button, the image, is hidden, together with the button itself. For cosmetical purposes the border of the parent element - figure - is removed.
You can further enhance the code.
follow the below steps
<div id="upload">
Remove
<img src="pic1.png"/>
</div>
<div id="deleted">
</div>
Javascript part
$(document).ready(function() {
$("#removebutton").click(function() {
$("#deleted").html($("#upload").find("img"));
});
});
Check this working fiddle http://jsfiddle.net/zzpgn6zr/
Let me know if it is helpful
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/
Trying to create some next and previous functionality here. Navigating through different HTML5 sections using hide and show, is it possible, for my back button, to find whichever div was last visible and show it?
This is my relevant html
<div id="next"><img src="img/next.png" alt="" onclick="nextPage()"></div>
<section id="splash">
<br><br><br>
<center>
<img src="img/home.jpg" alt="">
</center>
</section>
<section id="home">
<br><br><br><br><br>
<center>
<ul id="nav">
<li><img src="img/feat_btn.png" alt="" onclick="nextPage('feat-home')"></li>
<li><img src="img/models_btn.png" alt="" onclick="nextPage('model-lineup')"></li>
<li><img src="img/quiz_btn.png" alt="" onclick="nextPage('quiz')"></li>
</ul>
</center>
</section>
<section id="feat-home">feat home</section>
<section id="feat-e-menu">e menu</section>
<section id="feat-g-menu">g menu</section>
<section id="feat-i-menu">i menu</section>
<section id="model-lineup">lineup</section>
<section id="model-YWFE540H0A">model</section>
<section id="quiz">quiz</section>
relevant js
function nextPage(link) {
var vis = $("section:visible");
var next = vis.next();
if (link) {
var link = "#" + link;
vis.hide();
$(link).show();
} else {
vis.hide();
next.show();
}
}
So, the next button will take you through the flow off the app, but you are also able to press buttons to get to where you want to go, which is why I cant just have the back button show the prev section and hide the current one.
Any ideas?
On click, you will need to store what is currently being shown in a separate variable and use that for your previous button clicks.
When previous button is clicked show what is in the "previously shown" variable.
You will need to disable the previous button when it's a fresh page load.
This really does look a lot like some of the content slider plugins that are out there.
basically what I wanted to do is whenever an li is removed (via jquery .remove()) the set of li's slide to the space previously occupied the removed li. How can I accomplish this? Here is some code:
<li class="be-imagecontainer">
<span style="display:none">101</span>
<img src="http://localhost/thi/media/images/thumbnails/19_Koala.jpg" class="be-image" alt="19_Koala.jpg" />
<br/>
Delete
</li>
<li class="be-imagecontainer">
<span style="display:none">111</span>
<img src="http://localhost/thi/media/images/thumbnails/19_Penguins.jpg" class="be-image" alt="19_Penguins.jpg" />
<br/>
Delete
</li>
<li class="be-imagecontainer">
<span style="display:none">112</span>
<img src="http://localhost/thi/media/images/thumbnails/19_Hydrangeas.jpg" class="be-image" alt="19_Hydrangeas.jpg" />
<br/>
Delete
</li>
and here is some javascript code
$('a.be-delete').click(function(){
$(this).parent().remove();
// code to slide the rest of the divs the unoccupied space
})
the default behavior is that the rest of the list will snap to that space. How do I do that with a slide instead?
for other examples, check google wave's behavior when u close a panel. The other panel/s slide in to the previously occupied space
You can use the slideUp effect, and when it finishes, you can remove the DOM element:
$('a.be-delete').click(function(){
$(this).parent().slideUp('slow', function () {
$(this).remove(); // remove the li
});
return false;
})
You can use $(this).closest('li') instead of parent() if your anchor is nested in some other element.
Check an example with your markup here.