Is it possible to add a CSS transition or a jQuery animate() to make the “open” and “close” more smooth?
If so, what would that look like?
]]>I have a search form in my header that I want to stick to the top of the screen when scrolling just like I do with my menu. At this time, I’m able to have it stick where I want and all that. The only problem is that I need it to slide to the left when I toggle the search button (the box is hidden until toggled). Currently, it slides to the bottom nicely and then jumps to the left of the button, where I want it to end up. However, this doesn’t look smooth.
Here is my JS:
/*
* Toggles Header Search On and Off
*/
jQuery(document).ready(function($){
$(".search-toggle").click(function(){
$("#search-container").slideToggle('slow', function(){
$('.search-toggle').toggleClass('active');
});
// Optional return false to avoid the page "jumping" when clicked
return false;
});
});Please let me know what I need to change!
Thanks,
Brett
]]>I put this before the end of <head> in header.php:
<script>
$(document).ready(function(){
$("toggle").click(function(){
$("abouttoggle").slideToggle();
});
});
</script>And this in the body:
<div id="abouttoggle">
<div id="abouttoggle_inner">
<h1>This is the About Page.</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div>
</div>But when I click the button, it doesn’t do anything. What am I doing wrong?
]]><script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".btn-slide").click(function(){
jQuery("#panel").slideToggle("slow");
jQuery(this).toggleClass("active"); return false;
});
});
</script>I tried going back to ‘$’ instead of ‘jQuery’ but I knew that wouldn’t work. Turned off all plugins, but that’s not the issue either. So why did it stop working?
]]>As you can see on this team-member’s page, I’m fairly happy with how this looks (I would just like the hyperlink to constantly be the highlight color).
BUT… everything south of the section “Meet the team” is now broken as you can see on the this one-page website.
The jQuery code on the team-member’s page is definitely what’s breaking the website. The code used is :
<h4>Staatlich anerkannte Logop?din</h4>
<b>beruflicher Werdegang:</b>
1999 – 2002 Ausbildung zur Logop?din
2002 – 2004 angestellte Logop?din
seit 2004 selbst?ndige Logop?din
<!DOCTYPE html><html><head><script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>jQuery(document).ready(function(){
jQuery("#button").click(function(){
jQuery("#cache").slideToggle();
});
});</script></head><h5><a id ="button">Weiterbildungen (Klicken)</a></h5>
<body>
<div id="cache" style="display:none;">
? Trachealkanülenmanagement
? ?Intensivkurs – Stimmtherapie für Laryngektomierte“
? ?Gut bei Stimme sein“
? Myofunktionelle Therapie in Theorie und Praxis
? F?rderung der phonologischen Bewusstheit
? Auditive Wahrnehmungsprobleme
? ?Kindliches Stottern in Theorie und Praxis“
Mitglied im <img src="https://greifswald-logopaedie.de/wp-content/themes/hc/images/dbl.png" alt="DBL" />
</div>
</body>
</html>For your information. You can see the demo template used here. I don’t know if it helps you debug.
]]>What would be the best solution to display just 4-5 lines for each person and than have a “read more” option?
I tried using jQuery, but it was breaking the page. I used this:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#button").click(function(){
$("#cache").slideToggle();
});
});
</script>
</head>
<body>
<div id="cache" style="display:none;">
<p>Ce qui va être caché</p>
<p>Ce qui va être caché</p>
<p>Ce qui va être caché</p>
</div>
<a id ="button">Lien</a>
</body>
</html>Thanks ahead for your help!
]]>