top



How to toggle in/out with the direction to the left .
Like ego-one .



Help (:

I actually think, that Ego One have placed the image beside the fading div, that we toggle.

So the answer is properbly, make a normal toggle with fading, and left the div you wish to toggle, float. Smile

You can use the animate Smile

Gangstar15 i didn't find the efect on the net :(

Code:
$("selector").animate({property:"value"});
Change the selector, property and value Wink

Unknown Data on the selector i should write the class of the button ? like affiliates ?

That's right .. Example:

Code:
$(".clickbutton").animate({width:"200px"});
The class of the element is clickbutton, and I wan't to animate the width 200 pixels. (:

then the content will go to left for 200 px right ? then the code wiil look like this


Code:
  <div class="clickbutton">Content html </div>
and the script from you ?

That's correct once again.

Now er just need to activate the method, it can be done with a single click loke ...

Code:
$("button").click(function() {
$(".clickbutton").animate({width:"200px"});
});
And this button will then activate the function ...
Code:
<button>Activate Animate</button>

So man my hole code is this

Code:
 <script>$("button").click(function() {
$(".clickbutton").animate({width:"200px"});
});</script>
<button> Activate button  </button> 
so where i introduce the html content i don't get it Smile in a
Code:
<div class="clickbutton">Content html </div>
but if i introduce this under the
Code:
  <button> Activate button  </button>
i don't get any effect :(

Have you remembered to link to the jQuery library? Smile

so what is the link to the Jquery library ?

Code:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.js"></script>

man no effect this is wath i puted in my overall_footer

Code:
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.js"></script>
 <script>$("button").click(function() {
$(".clickbutton").animate({width:"200px"});
});</script>
<button> Activate button  </button> 
<div class="clickbutton">Content html </div> 

I see you place the script before the HTML, try place it like here Smile

Code:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.js"></script>

<button> Activate button  </button> 
<div class="clickbutton" style="border:1px solid black;">Content html </div>

<script type="text/javascript">
$("button").click(function() {
$(".clickbutton").animate({width: "200px"});
});
</script>
I've created a border for the div, so you can see when it animate, because if you haven't indicated a border, it will be blank, and you can see the div minimize. Smile

yes it worked but i want that when i click the button to go to left like here Razz or can you let me a link to a site o the net !

well, i need this also...
can someone help me? (write a full tutorial)

HTML:

Code:
<div class='toggle-content' style='display: none;top:38px;z-index:900;'>
Your Content here............


Your Content here............


Your Content here............
</div>
<a class='toggle-trigger' href='#' style='z-index:1000;top:40px;'><img border='0' src='http://i50.tinypic.com/14uysg6.png' /></a>

CSS:
Code:
.toggle-content {
position: fixed;
top: 50px;
left: -10px;
display: none;
background: rgba(0,0,0,0.7);
border: 1px solid transparent;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
width: 550px;
height: auto;
padding: 4px 4px 4px 80px;
filter: alpha(opacity=85);
opacity: .95;
}

a.toggle-trigger {
position: fixed;
text-decoration: none;
top: 50px;
left: 0;
padding: 5px 5px 5px 5px;
display: block;
}

jQuery:
Code:
<script type='text/javascript'>
jQuery(document).ready(function(){
jQuery(".toggle-trigger").click(function(){
jQuery(".toggle-content").toggle(150);
return false;
});});</script>

Sorry.. i edited the HTML Smile

Wow your cool Gangstar15 Smile !
Thanks man . Solved solved solved .
(Too bad, i didn't just get reply in my thread in the past 5 days . xD) .

You are welcome Happy
lol. sorry was busy Happy
or I'm busy Happy

[solved]