kuran Posted December 10, 2010 Share Posted December 10, 2010 http://www.scribbletone.com/I tried to analyze the source, but as usual that is pretty hard to do if you do not know specifically what you are looking for.. I would like to learn how the system works where you can call specific div id's into being visible, whilst hiding others.And how hard is it to implement the jquery 'easing' effect into this, the way this site has done?Thanks for any help! Link to comment Share on other sites More sharing options...
ShadowMage Posted December 10, 2010 Share Posted December 10, 2010 Showing and hiding elements is as simple as modifying their display or visibility properties. Using jQuery's easing functions to do that is a piece of cake: $(document).ready(function() {$('#divTestBtnFdOut').click(function() { $('#animationTestDiv').fadeOut('slow');});$('#divTestBtnFdIn').click(function() { $('#animationTestDiv').fadeIn('slow');});}); <button id='divTestBtnFdOut'>Fade Out</button><button id='divTestBtnFdIn'>Fade In</button><div id='animationTestDiv' class='animatedDiv'>Click one of the buttons above to animate!</div> Link to comment Share on other sites More sharing options...
dsonesuk Posted December 11, 2010 Share Posted December 11, 2010 The image to background color with text, is done by two containers occupying the same space. One container holds the image, and is always visible, the other is a container is within the first with a background color and text but is hidden from view.Only when you hover over the first container does the inner second container opacity changes from 0 to 1, and then 1 back to 0, when the cursor leaves container 1 area.container 1 = <div class="toggle_div">container 2 = <div class="text_container"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script><script type="text/javascript">/*<![CDATA[*//*---->*/$(document).ready(function() { $(".text_container").css("display", "none")$(".toggle_div").hover(function () {$(".text_container").css("opacity", "1");$(this).children(".text_container").stop().fadeIn(200);}, function() {$(this).children(".text_container").stop().fadeOut(200); });});/*--*//*]]>*/</script><style type="text/css">#image_container {width:700px; margin:0 auto; overflow:hidden; background-color:#99FF66;}#image_container div.toggle_div {width:218px; margin:0 7px 15px; height:170px; background-color:#3399CC; float:left; position:relative;}#image_container div img {width:100%; height:100%; border:none;}#image_container div.text_container{width:218px;height:170px; position:absolute; top:0; left:0px; background-color:#CC33FF; color: #fff;}#image_container div.text_container p {padding:0 10px;}#image_container div.text_container span {display:block;}</style></head><body><div id="image_container"> <div class="toggle_div"> <img src="image1.jpg" /> <div class="text_container"> <p> <span>IMAGE 1 IMAGE 1</span> <span>some text</span> <span>more text</span> </p> </div> </div> <div class="toggle_div"> <img src="image2.jpg" /> <div class="text_container"> <p> <span>IMAGE 2 IMAGE 2</span> <span>some text</span> <span>more text</span> </p> </div> </div> <div class="toggle_div"> <img src="image3.jpg" /> <div class="text_container"> <p> <span>IMAGE 3 IMAGE 3</span> <span>some text</span> <span>more text</span> </p> </div> </div> <div class="toggle_div"> <img src="image4.jpg" /> <div class="text_container"> <p> <span>IMAGE 4 IMAGE 4</span> <span>some text</span> <span>more text</span> </p> </div> </div> <div class="toggle_div"> <img src="image5.jpg" /> <div class="text_container"> <p> <span>IMAGE 5 IMAGE 5</span> <span>some text</span> <span>more text</span> </p> </div> </div> <div class="toggle_div"> <img src="image6.jpg" /> <div class="text_container"> <p> <span>IMAGE 6 IMAGE 6</span> <span>some text</span> <span>more text</span> </p> </div> </div></div></body></html> Link to comment Share on other sites More sharing options...
kuran Posted December 15, 2010 Author Share Posted December 15, 2010 Thank you all for the elaborate replies.One more question, I found this list of possible hide/show effects: http://www.w3schools.com/jquery/jquery_effects.aspIs one of these the affect that this site? http://www.scribbletone.com/ (once you click on a project, a grey bar appears allowing you to switch between types of content.. ) I was wondering how they could get the animation to be so smooth. Link to comment Share on other sites More sharing options...
ShadowMage Posted December 15, 2010 Share Posted December 15, 2010 One more question, I found this list of possible hide/show effects: http://www.w3schools.com/jquery/jquery_effects.aspIs one of these the affect that this site? http://www.scribbletone.com/ (once you click on a project, a grey bar appears allowing you to switch between types of content.. ) I was wondering how they could get the animation to be so smooth.I'm not sure what they are using. I didn't really look at the source code, but it is very possible they are using jQuery. The smooth animations is just one of the things you can do with jQuery. Just look at the demos on the slideDown() function. Link to comment Share on other sites More sharing options...
jonmunm Posted December 16, 2010 Share Posted December 16, 2010 If you used firebug, you would realize how the effect is implemented ... By the way, Jquery is not being used, it's just CSS ...Let's seeUploaded with ImageShack.usThis effect has a basic structure like this .. <div> <img /> <span><span/></div> The div tag has set width and height, and the image and <span> tag have also their dimentions set in order to span completetly the space of de div.At first, the <span> tag is not seen, due to this rule display: none, wich remove the <span> tag from the normal flow of the HTML. The image only has a set rule like this opacity: 0.8Then, when you mouse over the image, the display property of the <span> tag change to display: inline, which put it above the image. As this site dit, it's advisable to use absolute positioning for the <span> tag ...If you want more details, use firebug, it will help you a lot Bye!! Link to comment Share on other sites More sharing options...
ShadowMage Posted December 16, 2010 Share Posted December 16, 2010 These effects cannot be achieved with pure CSS (yet, not until CSS3 transitions/animations are implemented) so they have to be using JavaScript. And if you look in the source code, you will see a link to jQuery.js in the head. Simple showing and hiding of elements on hover can be done with pure CSS, but they will not have any animations (ie, they won't fade in/out like they do on that website). Link to comment Share on other sites More sharing options...
kuran Posted December 16, 2010 Author Share Posted December 16, 2010 These effects cannot be achieved with pure CSS (yet, not until CSS3 transitions/animations are implemented) so they have to be using JavaScript. And if you look in the source code, you will see a link to jQuery.js in the head. Simple showing and hiding of elements on hover can be done with pure CSS, but they will not have any animations (ie, they won't fade in/out like they do on that website).They seem to have put their scripts into a seperate javascript.js file, I did not know that was possible... it's a good tip to keep your code clean! Link to comment Share on other sites More sharing options...
dsonesuk Posted December 16, 2010 Share Posted December 16, 2010 one way to achieve this effect is to use the id of the links to identify the group which relate to that link, by using the id ref as a class name for each item in that groupid ref that identify each group to list<div id="navgroup"><a href="#" id="group1">group1</a><a href="#" id="group2">group2</a><a href="#" id="group3">group3</a></div>then use same id name as class name, to link related items to id ref <div class="toggle_div group1"> <img src="image1.jpg" /> <div class="text_container"> <p> <span>IMAGE 1 IMAGE 1</span> <span>some text</span> <span>more text</span> </p> </div> </div> <div class="toggle_div group3"> <img src="image2.jpg" /> <div class="text_container"> <p> <span>IMAGE 2 IMAGE 2</span> <span>some text</span> <span>more text</span> </p> </div> </div> <div class="toggle_div group3"> <img src="image3.jpg" /> <div class="text_container"> <p> <span>IMAGE 3 IMAGE 3</span> <span>some text</span> <span>more text</span> </p> </div> </div> <div class="toggle_div group2"> <img src="image4.jpg" /> <div class="text_container"> <p> <span>IMAGE 4 IMAGE 4</span> <span>some text</span> <span>more text</span> </p> </div> </div> <div class="toggle_div group3"> <img src="image5.jpg" /> <div class="text_container"> <p> <span>IMAGE 5 IMAGE 5</span> <span>some text</span> <span>more text</span> </p> </div> </div> <div class="toggle_div group2"> <img src="images6.jpg" /> <div class="text_container"> <p> <span>IMAGE 6 IMAGE 6</span> <span>some text</span> <span>more text</span> </p> </div> </div>then use jquery to hide all containers with class 'toggle_div' but then unhdie all containers with class that match chosen link id ref <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script><script type="text/javascript">/*<![CDATA[*//*---->*/$(document).ready(function() {$(".toggle_div img").css("opacity", "0.5")$(".text_container").css("display", "none")$(".toggle_div").hover(function () {$(".text_container").css("opacity", "1");$(this).children(".text_container").stop().fadeIn("slow");}, function() {$(this).children(".text_container").stop().fadeOut(200); });$("#navgroup a").click(function() {groupclassref= $(this).attr("id"); $("#image_container div.toggle_div").hide();$("#image_container div."+groupclassref).show(); });});/*--*//*]]>*/</script><style type="text/css">#image_container {width:700px; margin:0 auto; overflow:hidden; background-color:#99FF66;}#image_container div.toggle_div {width:218px; margin:0 7px 15px; height:170px; background-color:#3399CC; float:left; position:relative;}#image_container div img {width:100%; height:100%; border:none;}.text_container, #image_container div img { cursor:pointer;}#image_container div.text_container{width:218px;height:170px; position:absolute; top:0; left:0px; background-color:#CC33FF; color: #fff;}#image_container div.text_container p {padding:0 10px;}#image_container div.text_container span {display:block;}#navgroup a {padding: 0 10px;}</style></head><body><div id="navgroup"><a href="#" id="group1">group1</a><a href="#" id="group2">group2</a><a href="#" id="group3">group3</a></div><div id="image_container"> <div class="toggle_div group1"> <img src="image1.jpg" /> <div class="text_container"> <p> <span>IMAGE 1 IMAGE 1</span> <span>some text</span> <span>more text</span> </p> </div> </div> <div class="toggle_div group3"> <img src="image2.jpg" /> <div class="text_container"> <p> <span>IMAGE 2 IMAGE 2</span> <span>some text</span> <span>more text</span> </p> </div> </div> <div class="toggle_div group3"> <img src="image3.jpg" /> <div class="text_container"> <p> <span>IMAGE 3 IMAGE 3</span> <span>some text</span> <span>more text</span> </p> </div> </div> <div class="toggle_div group2"> <img src="image4.jpg" /> <div class="text_container"> <p> <span>IMAGE 4 IMAGE 4</span> <span>some text</span> <span>more text</span> </p> </div> </div> <div class="toggle_div group3"> <img src="image5.jpg" /> <div class="text_container"> <p> <span>IMAGE 5 IMAGE 5</span> <span>some text</span> <span>more text</span> </p> </div> </div> <div class="toggle_div group2"> <img src="images6.jpg" /> <div class="text_container"> <p> <span>IMAGE 6 IMAGE 6</span> <span>some text</span> <span>more text</span> </p> </div> </div> </div></body></html> Link to comment Share on other sites More sharing options...
Guest scribbletone Posted December 17, 2010 Share Posted December 17, 2010 Just found this through google alerts, and thought I might be able to clear things up.We did use Jquery pretty heavily. Primarily the slideDown() fadeIn() and fadeOut() effects. We also used the Masonry plug-in to help with the sorting/rearranging, which is not all too different from the method that dsonesuk pointed out in the last post. http://desandro.com/demo/masonry/docs/ Link to comment Share on other sites More sharing options...
thescientist Posted December 17, 2010 Share Posted December 17, 2010 Just found this through google alerts, and thought I might be able to clear things up.We did use Jquery pretty heavily. Primarily the slideDown() fadeIn() and fadeOut() effects. We also used the Masonry plug-in to help with the sorting/rearranging, which is not all too different from the method that dsonesuk pointed out in the last post. http://desandro.com/demo/masonry/docs/ wow, i knew the internet was powerful...but damn. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.