We Keep Coding

Jquery .load() as include

Im working on a company website that has it's own cms. We don't have access to the server config/ftp and I can not run server-side files, only html/css/js.
I was trying to include the menu using jquery.load() function to make my life easier when my client asks to change some menu item. (The site has more than 20 pages).
The problem is: when I use jquery.load() function, the menu doesn't work properly (it's a menu with slide effect on mouseover) because part of the code is only in the DOM (I guess that's the problem). Is there any other way to include the html and keep the menu working?

This sounds like the events aren't bound since you're loading dynamic content. You'll need to use delegated events so that they still work for dynamically loaded content.

Just used the callback of the load function to call the events of the menu.
Works like a charm!

Using Angular 1.2 and Animate.css for loading animation?

I'm trying to get a page to animate in on load using Angular 1.2 and Animate.css.
Here's the Plunker: http://plnkr.co/edit/oDiDfRCO2Msc0StNrtqH
I'd like the background to crossfade in and the yellow menu on the right side to slide in from the right.
In main.html:
<div>
<div class="background-container">
<my-Background></my-Background>
</div>
<div class="menu-container">
<my-Menu id="menu"></my-Menu>
</div>
</div>
In main.css:
.menu-container.ng-enter {
animation:3s fadeInRightBig;
}
.background-container.ng-enter {
animation:3s fadeInDown;
}
The animations defined in main.css don't seem to get fired. I'm pretty sure its due to the order and/or timing of css being loaded although I might be dealing with more than one issue.
What's the "right" way to ensure everything, from an animation standpoint, is loaded and ready in order to make the animations work on load?

Have you looked at something like an HTML5 loader to load your initial assets when the DOM is loaded. There is a jQuery plugin, I know it is not Angular and another library, but it may help your order of operation.
http://gianlucaguarini.github.io/jquery.html5loader/

You can try nganimate , an easy documentation for you to refer
https://docs.angularjs.org/api/ngAnimate

when creating dynamic content using jquery ajax, scrollbar not appearing

I have some jquery report in which I am creating some dynamic html content (nested divs,span,label) using json.
Its using jquery,mCustomScrollbar,commons,jqueryui.
I have one <div>...//some static code </div> in this case everything works fine.
but when I create some code between this <div> // dynamic code using ajax </div>. Its scrollbar not appearing.
but If I minimize,maximize browser window or 'firebug' the scrollbar appearing.
Is it because of dynamice css style generating?
I am new to jquery css help

If the scrollbars you refer to are from the mCustomScrollbar plugin you will need to use its update method once the ajax content is inserted in the DOM.
$(selector).mCustomScrollbar("update");
See the docs at http://manos.malihu.gr/jquery-custom-content-scroller/#methods-section

I have the same problem and I solved it with a work around by using destroy method which is also provided by mCustomScrollbar
when I add the new content to the selector I destroy the mCustomScrollbar
$(selector).mCustomScrollbar("destroy");
then I rebuild it again; you can check destroy and rebuild in this demo
http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/disable_destroy_example.html
BTW update method didn't work with me because as it's mentioned that updateOnContentResize by default is true which calls update method, I really don't know what is problem.

How to make a dropdown menu like the one on amazon.com?

How to make a dropdown/slideout menu like amazon.com such that when you mouseover "Shop By Department", then mouseover all the options, another menu slides out to the right displaying content based on what you moused over? (If possible, with CSS3 only without javascript)?
Also assuming you had multiple departments like amazons, is it practical to have multiple divs like:
<div id="department1" style="display:none">
Content for department1
</div>
<div id="department2" style="display:none">
Content for department2
</div>
...
TO get that slideout part after you get the dropdown, I call the div id "currentdepartment" to change content that changes upon onmouseover on any "name of department", I would typically do: $("#currentdepartment").html($("#department1").html())
is there some better way to do this for ideal performance? (based on speed and space [it seems that having multiple divs for each department's content on mouseover on the same page seems potentially wasteful])

Someone wrote a blog post about the amazon drop down box a while ago:
http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown

Amazon has built its own Jquery for this. Ofcourse they have used other libraries like Jquery and Sizzle but they cannot use a script directly nor can we intend to use this particular script directly.
So your answer would be that Amazon basically uses CSS sprites, Jquery, and Sizzle to develop their own Custom script for their code. I checked the code and it involves over 5500 lines which i do not think is feasible for you unless you are building Amazon part 2.
So i would suggest looking for dropdown menu's which are easier to build and a starting place for this would be Dynamic Drive
They have easy to use menu's and tutorial's to guide you to use them.
Hope that answered your question

Load content on mouseover

I want to load the content of a div on the mouseover of an icon within the div. Furthermore, the mouseover should only fire once and preferably the icon should disappear after loading the content.
The content that will be loaded in de div will be an external file with social media buttons. In case you are wondering; I don't want them to load with the rest of the page because they slow it down. Also, some visitors might not be comfortable with sites like FB and G+ tracking their internet movement.
So, I have gathered some code and copy pasted a bit and this is what I came up with:
<div id="social_media">
<img src="icon.png" onmouseover="javascript:$('#social_media').load('external_file.php'); this.onmouseover=null;" alt="Show Social Media Buttons!" />
</div>
The thing is, it works perfectly fine :) But since it is code that I got from 3 different sources and pasted together, my question is if it's any good? For example, I never tried to find a way to remove the icon on mouseover, it just did :)
I have almost no experience in coding Javscript/jQuery, so please let me know what you think about it so that I can learn from it!
Thanks and greetings from Amsterdam!

avoid the inline code try
<div id="social_media">
<img src="icon.png" alt="Show Social Media Buttons!" />
</div>
attach a mouseenter event handler to the img
$(function(){// short cut of $(document).ready(); read more on google
$("#social_media>img").bind({
mouseenter:function(e){
$('#social_media').load('external_file.php');
}
});
});
P.S the selectors are not optimized nor the outcome of this code it was just to give you an idea
DEMO

The answer to your real question is "the code is kinda middling." The reason the icon went away is because when you called load you replaced it. Internally your document is a tree of piece of the document called the DOM, for "document object model" -- abusing terminology, since that tree is actually an expression of the model, not the model itself.
There's a node in that tree that is your div, and it contains a node with the icon img. When you do the load(), that node is replaced with what you loaded.
As #john says, it's undesirable to put code like that inline, because when you want to figure out what it's doing later, it can be hard to find.

Several things to note:
You really should avoid inline JavaScript code in HTML, that's not clean at all. Move it to an external JavaScript file of possible, or, at least, in a separate <script> tag. It will be ways easier to maintain.
Using this method to fire the event only once seems odd. You should use the jQuery one method, which is made exactly for that.
The icon just disappears because the load method replaces the content of the div in which the icon is.
For example, IMO, the code should be:
$('#social_media').one('mouseover', function(){
$(this).load('external_file.php');
});