I'm asking for some orientation and recommendations for developing something similar like the yahoo movies page: http://movies.yahoo.com/
I don't know how the thing at the top with the arrows and different title of movies is called but I've seen it several times.(the one that has 4 options:expendables, yogi bear, etc) I want to add something like this so I'm asking for orientation on what to look for and develop it on java script.
thanks!
Yes, that's what's called a Carousel, and there are many libraries and plugins for doing it. You might try Yahoo's own YUI Carousel Control or this one for jQuery, but there are plenty of others out there--just Google for them.
It's basically four links and four images here. When you click on the link, the associated image will be shown.
I will show you an example.
HTML:
<div class="links">
<a class="link-first" href="#">Show image 1</a>
<a class="link-second" href="#">Show image 2</a>
</div>
<div class="images">
<img class="image-first" href="#" alt="" />
<img class="image-second" href="#" alt="" />
</div>
JavaScript (jQuery):
$(".links a").click(function()
{
$(".images img").hide();
$(".images ." + this.className.split("-")[1]).show();
});
Related
I have a dashboard kind of page where on the left you would have menu items like:
link 1
link 2
link 3
Each of them going to a different action in the same controller.
I would like to have each action render it's data in the same page (in partial views) but I have no idea what the "best" way of doing this would be.
So lets say link 1 is rendering a list of people (table), link 2 statistics (charts) and list 3 some configuration properties.
How should I define this so that on each click, the main frame (which is the menu bar on the left containing the link 1-2-3 and is defined in a shared view) stays but only the middle content (partial views) would change, keeping in mind that link 1 is a table, link 2 charts and other controls and link 3 a bunch of controls (textboxes, drop down's and so on).
Should I show/hide div's on each click? This seems/feels kind of dirty to me?
All input/suggestions are very welcome!
EDIT:
This is the behavior I want (accepted answer): Show/Hide Multiple Divs with Jquery
Note: I am using C# in an ASP.NET MVC project and I would prefer a C# ASP.NET MVC solution (Javascript if needed), not other script/coding languages or frameworks.
You could add an onClick Handler on a Link:
<a onClick="handleLink1()">Link1</a>
Assuming the Rigth side locks like this:
<div id = "renderArea">
</div>
With that you could write the handleLink1() Functio nas follows:
function handleLink1(){
//Here you asign the new HTML:
Document.getElementById("renderArea").innerHTML = "<div/>";
}
Now you can write an Function for every Link and rerender the Rigth Part as you wish.
You should use ether PHP or Java for this kind of Setup.
Alternativly you could use an JS Framework like Angular or React, they can Handle it as well.
For Plain JS you can alsways use an Event (The Links gets clicked) to change the Page as you wish.
For now I have implemented this answer: Show/Hide Multiple Divs with Jquery since the other ones are not in my direct knowledge to implement them
Code sample:
jQuery(function() {
jQuery('#showall').click(function() {
jQuery('.targetDiv').show();
});
jQuery('.showSingle').click(function() {
jQuery('.targetDiv').hide();
jQuery('#div' + $(this).attr('target')).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="buttons">
<a id="showall">All</a>
<a class="showSingle" target="1">Div 1</a>
<a class="showSingle" target="2">Div 2</a>
<a class="showSingle" target="3">Div 3</a>
<a class="showSingle" target="4">Div 4</a>
</div>
<div id="div1" class="targetDiv">Lorum Ipsum1</div>
<div id="div2" class="targetDiv">Lorum Ipsum2</div>
<div id="div3" class="targetDiv">Lorum Ipsum3</div>
<div id="div4" class="targetDiv">Lorum Ipsum4</div>
http://jsfiddle.net/XwN2L/
I am still open to other suggestions, specially if they involve Partial views and not to much of other things.
Thank you all so far!
how can i create moving div like on this site (on right side of slider) Click to see div on web with javascript or jquery ?
The vertical carousel on this page (http://jquery.malsup.com/cycle2/demo/carousel.php) might help you out.
You can Google for jQuery carousel and you will find a lot of further tutorials and downloads for this.
<div class="slideshow vertical"
data-cycle-fx=carousel
data-cycle-timeout=0
data-cycle-next="#next3"
data-cycle-prev="#prev3"
data-cycle-pager="#pager3"
data-cycle-carousel-visible=2
data-cycle-carousel-vertical=true
>
<img src="http://malsup.github.io/images/beach1.jpg">
<img src="http://malsup.github.io/images/beach2.jpg">
...
<img src="http://malsup.github.io/images/beach9.jpg">
</div>
<div class=center>
<a href=# id=prev3><< Prev </a>
<a href=# id=next3> Next >> </a>
</div>
<div class="cycle-pager" id=pager3></div>
The image and caption, in class story has two different links. Image points to one location and link to another.
I need to make whole class story into a link.
<div class="story">
<img src="linkforimage">
Caption for image
</div>
I need a solution like this:
<a href="link">
<div class="story">
<img src="linkforimage">
Caption for image
</div>
</a>
Nesting a tags is a bad idea. I would use a delegate here. Have a wrapper a tag and in JS check which source span was clicked.
html
<a href="#" class="story">
<span data-href="link"><img src="linkforimage"/></span>
<span data-href="link2">Caption for image</span>
</a>
js (jquery based)
$('.story').on('click', 'span', function() {
document.location.href= $(this).data('href');
});
You can't have anchor tag inside anchor tag.
You can use onclick method to achieve your goal.
<div onClick="window.open(link);" class="story">
<a> <img src="linkforimage"></a>
<a onClick="window.open(link2); event.stopPropagation();" >Caption for image </a>
</div>
EDIT jsfiddle
Clarifying the problem I am facing right now is that I am using embedly platform, where image comes from . So, I just post with link and image are parsed from the link by embedly. But, that ahref takes user to original web site. Caption takes user to the page with that content on my web site. I need to make of caption to the whole div.
So, I found the answer with CSS,
I just added: style=" pointer-events: none;cursor: default;" on the link with image and style="cursor: pointer;" onclick="window.location='link'" on a class "story" in div.
I have the following code block to acheive a slideshow to navigate different content(list) on click of the navigation buttons. Everything goes fine and works great. But indeed i need an additional feature like the slideshow should run on the load of the page and the buttons to choose the exact position of the slideshow as well. Still I need those button to navigate my slide show. Thanks in advance.
MARKUP
<div class="testimony">
<div class="container">
<ul class="test-con">
<li class="current">
<a class="image-frame" href="">
<img src="http://placekitten.com/g/100/150"></a>
<h5>“ My Test Content 1 ”</h5>
<h6>- Test 1</h6>
</li>
<li>
<a class="image-frame" href="">
<img src="http://placekitten.com/g/100/150"></a>
<h5>“My Test Content 2”</h5>
<h6>- Test 2</h6>
</li>
<li>
<a class="image-frame" href="">
<img src="http://placekitten.com/g/100/150"></a>
<h5>“ My Test Content 2 ”</h5>
<h6>- Test 3</h6>
</li>
</ul>
<ul class="navigator">
<li class="current"></li>
<li></li>
<li></li>
</ul>
</div>
</div>
JQuery
$('.navigator li').click(function () {
var index = $(this).index();
$(this).addClass('current').siblings().removeClass('current');
$('.test-con li').hide();
$('.test-con li').eq(index).addClass('current').fadeIn('slow').siblings().removeClass('current');
});
NOTE: Need to animate width instead of fade animation.
FOR REFERENCE: CHECK THIS
FIDDLE DEMO
jQueryUI provides a lot of facilities to make personalized the js code.
In any case, why don't you try to use a library of js sliders already existing?
What you want to create could increase proportionally with the appeal you want to reach :)
I knew http://www.slidesjs.com/, which makes the same work with the required attention.
Alex
First things first, I'm building my website on Bootstrap 3, which has it's own image gallery element in it. What I basically want to achieve, is that when I have a couple of buttons and the gallery element on the same page, pressing some of the buttons changes the images in the gallery element.
Tried to Google it but couldn't find any solutions that would satisfy my needs. Here are a couple of screenshots. JSFiddle is a bit difficult thing to be offered here, since I can't really include the image gallery element from Bootstrap, and including just the buttons would be a waste.
This is what I got right now:
This requires some sort of a knowledge about Bootstrap and JS/jQuery, since I'm not able to provide any demo-site or fiddle for this. All working solutions deserve my thanks!
UPDATE:
Here is the source code for the image-gallery, what it looks like in the firebug inspector. This should be of use for someone, since this still goes unsolved.
I think you are looking for this: http://isotope.metafizzy.co/
You need to use this markup for your gallery. You need to wrap the images, that each button should show in one div container
<a href="#" id="btn1" class="btn" >Button 1</a>
<a href="#" id="btn2" class="btn" >Button 2</a>
<a href="#" id="btn3" class="btn" >Button 3</a>
<div class="gallery">
<div id="cat1" class="cat">
<img src="//placehold.it/50x50">
<img src="//placehold.it/50x50">
<img src="//placehold.it/50x50">
</div>
<div id="cat2" class="cat" style="display:none;">
<img src="//placehold.it/50x50/ffff00">
<img src="//placehold.it/50x50/ffff00">
<img src="//placehold.it/50x50/ffff00">
</div>
<div id="cat3" class="cat" style="display:none;">
<img src="//placehold.it/50x50/00ff00">
<img src="//placehold.it/50x50/00ff00">
<img src="//placehold.it/50x50/00ff00">
</div>
</div>
And add this Jquery code to the end of the page
function show(id)
{
$('.cat').hide();
$('#cat'+id).css('display','block');
}
$('#btn1').click(function(){show('1')});
$('#btn2').click(function(){show('2')});
$('#btn3').click(function(){show('3')});