We Keep Coding

Generate a navigation from sections and slides with js

I use fullpage.js and want to build navigation automatically when I ad a section or a slide. Therefore I need the id from the sections. Which I have in the script below. But I also need a data-anchor nested in the slide div's inside each section.
**Goal: the html structure is driven by fullpage.js. al working fine. But now I want to automatically generate a submenu for the slides. Therefor I need the id from the section. (which is done) And the value from the data-anchor to put into the href. so the href src needs to be =section0/about and section0/history. when I add a slide in the section it should automatically put a link in the nav. **
Anyone?
HTML
<div id="fullpage">
<div id="section0"></div>
<div id="section1">
<div class="slide" data-anchor="about"></div>
<div class="slide" data-anchor="history"></div>
</div>
<div id="section2"></div>
<div id="section3"></div>
</div>
JS
$( document ).ready(function() {
var sections = $('#fullpage > div').map(function(){
return '#' + this.id;
}).get();
});
RESULT MENU
<ul id="subnav" class="innernav">
<li class="subnav">About</li>
<li class="subnav">History</li>
</ul>
Edit
Does my explanation make any sense?

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.

Removing an image and showing this removed image in the deleted section

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

Slideshow - link slide to URL only working for last slide

I'm using lean slider: http://dev7studios.com/lean-slider/
I want to link each slide to a different url. I've noticed that only the code in the last slide gets executed (and also applied to all other slides). For instance, adding an tag to google on just the last slide results in all slides linking to google. Somehow, it only sees the very last slide - if you inspect element on the slide, you'll see it always highlights the last slide's code.
EDIT: I've also noticed that it works fine when you don't include the sample-style.css file. But without this, there is no fade/transition effect and the navigation buttons are not formatted, so it would be pointless without this file, but the issue is probably with how the slider works.
Any ideas on what's causing this or how to fix it?
The only thing changed - added links to each slide. (index.html)
...
<div id="slider">
<div class="slide">
<a href="http://www.yahoo.com" ><img src="images/1.jpg" alt=""/></a>
</div>
<div class="slide2">
<a href="http://www.stackoverflow.com" ><img src="images/2.jpg" alt="" /></a>
</div>
<div class="slide3">
<a href="http://www.amazon.com" ><img src="images/3.jpg" alt="" /></a>
</div>
<div class="slide4">
<a href="http://www.google.com" ><img src="images/4.jpg" alt="" /></a>
</div>
</div>
...

I just figured it out. You should edit z-index property in these three places:
.lean-slider-slide.current {
z-index: 1;
}
#slider-direction-nav {
z-index: 2;
}
#slider-control-nav {
z-index: 2;
}
You can find it in slider.css and sample-style.css when you downloaded Lean Slider.

Have a look on this EXAMPLE, it works perfectly even with external resources.
Things that you need to make sure you have:
1.Include jQuery library (jQuery MUST be included BEFORE lean-slider.js)
2.Include the lean-slider.js
3.Include the lean-slider.css
4.Make sure you have an auto_increment class on your images (slider1 , slider2, slider3, etc)
Below all these (not before) add this:
$(document).ready(function() {
$('#slider').leanSlider();
});
And make sure the div that contains your images has an ID id="slider"

Always take the last link; play with the css you can force the position of elements and enable the link for each image:
/*lean slider css overwrite*/
#slider-control-nav, #slider-direction-nav
{
z-index:3;
}
.lean-slider-slide.current
{
z-index:2;
}
.lean-slider-slide.current a
{
float:left;
}

Jcarousel change a divs text depending on first item shown

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