I'm looking for a simple javascript to create side panel with hiding after some action(ex. after clicking on some area). Something like this example but appearing from left side not from up to down as the example works.
Will be appreciated for any help :)
You have 2 options. You can either use JQuery or scriptaculous to do this. There are plenty of examples and tutorials on the internet or you can simply use java script to this.
First download émile It's a very simple javascript animation framework.
Since you didn't provide any HTML markup, I'm assuming you have something like this.
<div id="side-panel">panel content..</div>
<div id="content">main content..</div>
and let's say your side-panel element has a CSS style of width:200px. Ok, now place a button somewhere and assign it a click event. Such as onclick="togglePanel()"
Here is the content of the togglePanel function:
function togglePanel(){
var panel = document.getElementById('side-panel');
if(!panel.__closed){
emile(panel, 'width:0px');
panel.__closed = true;
}else{
emile(panel, 'width:200px');
panel.__closed = false;
}
}
If you check the documentation of the emile framework you can do lot's of other cool things.
as you haven't provided us your code (which you have build) that's why I'm just giving a code to help you (And I don't know that this is a right answer or not). This code needs jQuery Ver.1.4 at least I think so, but I'm not clear. Anyways let's get started. Here is a link to live demo.
Hope this helps!
Related
As stated above, I have problems with implementing a specific code on my website.
This is how it should look: https://codepen.io/smalinux/pen/VjXokA.
var d1_li = MorphSVGPlugin.convertToPath("#d1_li"),
d2_li = MorphSVGPlugin.convertToPath("#d2_li"),
d3_li = MorphSVGPlugin.convertToPath("#d3_li"),
d4_li = MorphSVGPlugin.convertToPath("#d4_li"),
d5_li = MorphSVGPlugin.convertToPath("#d5_li"),
d6_li = MorphSVGPlugin.convertToPath("#d6_li"),
d7_li = MorphSVGPlugin.convertToPath("#d7_li"),
d8_li = MorphSVGPlugin.convertToPath("#d8_li"),
d9_li = MorphSVGPlugin.convertToPath("#d9_li");
(I don't know how I show the rest of the JS code, but you can see it in the provided link)
Now, I have a Wordpress website and I am not good in HTML/JS/CSS at all. I am using the Avada theme and when I try to implement this, I either get a white box with nothing happening at all when I use the code generator. When I try to implement the codes seperately I see all the animations overlapping eachother and not moving (meaning JS is wrong?).
Now, I hope I explained my problem. If somebody could help me I would be forever grateful!
Exactly how are you implementing the css and js? Screenshots would help. Are you using a child theme?
I've found a few posts on here similar to what I'm asking, but they all involve jQuery (I'm looking for a solution that's purely javascript, as simple as possible).
I have a page with a fixed nav on the left, where the different links bring you up or down to different sections on the page. It works fine, but I was trying to find a way to animate the scroll. I managed to come up with some javascript that tells me the offset between the sections:
function scroll(e) {
dest = e.target.getAttribute('href');
(for example, this would give me the result of #aboutCon)
destination = dest.replace("#", "");
(this changed it to aboutCon which is already defined as a variable containing the "About" section)
var destOffset = window[destination].offsetTop;
window.scrollTo(0, destOffset);
}
but I have no idea how to take that information and animate it. I've found a few javascript solutions but they're so complicated, whenever I try applying them to my own code, they don't work. I'm hoping there's a simple way to achieve this?
I'm a student and still learning so if you have an answer, an accompanying explanation would be greatly appreciated! Thank you!
document.getElementById("elementID").scrollIntoView();
Or cleaning it up a bit...
function scrollIntoView(eleID) {
var e = document.getElementById(eleID);
if (!!e && e.scrollIntoView) {
e.scrollIntoView();
}
}
Of course replace "elementID" with the ID of the div or element you want to scroll to.
This one is the simplest solution I've found with pure JS.
I am trying to enhance the menu of my website a bit by making use of the jQuery accordion plugin:
http://jqueryui.com/accordion/
This works perfectly fine and i think that it is a great plugin to make use of... However, i have noticed that it requires a specific layout in order to achieve these results:
<div id="accordion">
<h3>Section 1</h3>
<div>
<p>
ETC...
</p>
</div>
NB: repeated for every result
</div>
Now this is a bit of a problem in that when javascript is disabled, the entire output of this menu is displayed (all categories and containing information).
This is simply too much information to be output all at once and this is the reason that it has been broken up with PHP in the first place. In essence it would look like this:
// No category selected
* Fruits
* Vegetables
// Category selected
o Fruits
- Apples
- Oranges
* Vegetables
// Javascript Disabled
o Fruits
- Apples
- Oranges
* Vegetables
- Potatoes
- Onions
So what i would like to do, is provide an alternate means of navigation for users that have disabled javascript (the old menu that is fully functional and works regardless).
I currently make use of a few options in modernizer:
http://modernizr.com/
To increase browser support on some CSS properties i have used. I am aware that it can be used to detect if javascript is enabled by appending a class "js" to the body tag.
So with that, i decided to try and wrap the old menu within a containing div, and the new menu within a containing div. My idea is that i can then these divs with display: none;.
Before i carry on, i am really just guessing here so if i am going about this the wrong way... I would appreciate it if someone could point me in the right direction. With that out of the way, i found an article on stackoverflow that relates to this:
PHP & <noscript> combination to detect enabled JavaScript in browser
And with my very limited knowledge of jQuery have adapted it slightly to fit what i hope to achieve:
<script type="text/javascript">
$(document).ready(function(){ // Use jQuery!
// Remove the no-js and add the js (because JS is enabled (were using it!!)
$("body").removeClass("no-js").addClass("js");
})
// Put it in a var so you dont traverse the DOM unnecessarily.
var useJS = $("body").hasClass("js");
if(useJS){ // true or false if <body> has class JS.
// JS Enabled
$("#oldMenu").css("display", "none");
$("#newMenu").css("display", "inline");
} else {
// JS NOT enabled
$("#newMenu").css("display", "none");
$("#oldMenu").css("display", "inline");
}
</script>
Now the problem I am facing is that i cannot seem to get this script to register or make any visible difference. When i look at the body tag in the source there is no class on the body tag. The menu is not triggering as i thought it would and i am now after quite some time... Very confused.
If anyone could offer me some assistance, advice, information or indication that would help me to solve this current issue, i would really, REALLY appreciate that!
Thank you for taking the time to read through my line story! :)
EDIT:
#RomainPaulus suggested this and it works:
<script type="text/javascript">
$(document).ready(function(){ // Use jQuery!
// Remove the no-js and add the js (because JS is enabled (were using it!!)
$("body").removeClass("no-js").addClass("js");
// Put it in a var so you dont traverse the DOM unnecessarily.
var useJS = $("body").hasClass("js");
if(useJS){ // true or false if <body> has class JS.
// JS Enabled
$("#oldMenu").css("display", "none");
$("#newMenu").css("display", "inline");
} else {
// JS NOT enabled
$("#newMenu").css("display", "none");
$("#oldMenu").css("display", "inline");
}
})
</script>
Kenneth's response explains a lot, but I have noticed something else. Your code
var useJS = $("body").hasClass("js");
is executed before
$(document).ready(function(){ // Use jQuery!
// Remove the no-js and add the js (because JS is enabled (were using it!!)
$("body").removeClass("no-js").addClass("js");
})
You should put everything inside the $(document).ready(function(){ ... })
So I guess that explains why your code doesn't work.
The problem you face here is that, obviously when Javascript is not enabled, you're Javascript is not executing.
What you need to is hide the DIV by default with CSS. Then, when your page loads, show it through JS.
Javascript disabled => Div stays hidden, because no code is executed
Javascript enabled => div is hidden on load, but the script shows it
Also, if Javascript is disabled, Modernizr won't help, since it's a JavaScript library.
I am trying to launch an animation with JQuery using .css. I want to turn letter left, then right, then again left and right while it will be moving up.
$('.envelope').click(function() {
$(this).find('.list')
.animate({top:'0px'},1000);
$(this).find('.list').delay(100)
.css({"-ms-transform":"rotate(-6deg)","-webkit-transform":"rotate(-6deg)","transform":"rotate(-6deg)"});
$(this).find('.list').delay(200)
.css({"-ms-transform":"rotate(6deg)","-webkit-transform":"rotate(6deg)","transform":"rotate(6deg)"});
$(this).find('.list').delay(300)
.css({"-ms-transform":"rotate(-6deg)","-webkit-transform":"rotate(-6deg)","transform":"rotate(-6deg)"});
$(this).find('.list').delay(400)
.css({"-ms-transform":"rotate(6deg)","-webkit-transform":"rotate(6deg)","transform":"rotate(6deg)"});
});
adding link
You should use jQuery.queue for this
http://api.jquery.com/jQuery.queue/
I can make you an example if you need one. Here is a good write up:
http://cdmckay.org/blog/2010/06/22/how-to-use-custom-jquery-animation-queues/
The example is doing something very similar to what you are trying to accomplish. Let me know if you can't get this working. I can throw together a quick example for you.
The jQuery transit plugin is designed for exactly this! It is jQuery animation API compatible, but uses CSS transitions.
http://ricostacruz.com/jquery.transit/
I am using the latest jstree commit from github with the checkbox plugin as a part of my form. I am using the tree with the "real_checkboxes" attribute.
Everything is fine except the checkbox plugin does not actually add any changed property attribute to the hidden field and nor does it seem to have a external function that will allow me to hook in to create custom functionality.
Is it possible for me to understand and listen for when a checkbox is either ticked or unticked?
Thanks,
UPDATE: after doing some experimenting I was able to over ride the default functionality of the check and uncheck methods using:
$.jstree._instance.prototype.check_node = function(node){ alert("here"); }
However it isn't very clean and it does override the whole method.
Is there:
a) a cleaner way to do it?
b) a way to just do a callback on the function rather than replacing the whole damn thing?
Thanks again,
#Noctyrn
Yes I did that originally but then I looked through the docs a lot more closely and found this:
$(".js_tree_'.$this->attribute.' div").bind("check_node.jstree", function(){});
But yes your function does the same :). But since mine is right to the jsTree docs Ima mark my answer as the right one. Also that function allows for different trees on the same page to have different binds so it is better overall :).
Thanks for the help :),
This is actually less clean but at least it gets the job done:
var check_node_func = $.jstree._instance.prototype.check_node;
$.jstree._instance.prototype.check_node = function(node) {
check_node_func.apply(this, arguments);
alert("here");
}