We Keep Coding

How to use jQuery to switch divs on and off

Okay so I am looking at this website, http://codetunnel.net/, and I saw that it only used one page, but jQuery was used to display different divs, therefore making it feel like a multipage website. I tried using the jQuery in my codepen, but it never worked. Can someone help me understand how the jQuery works, and how I can implement it into my own sites? The jQuery looks like this:
$(function(){
$("#nav-home").click(function(){
$("#home").show();
$("#projects").hide();
$("#contact").hide();
$(".selected").removeClass("selected");
$("#nav-home").addClass("selected");
});
$("#nav-projects").click(function(){
$("#home").hide();
$("#projects").show();
$("#contact").hide();
$(".selected").removeClass("selected");
$("#nav-projects").addClass("selected");
});
$("#nav-contact").click(function(){
$("#home").hide();
$("#projects").hide();
$("#contact").show();
$(".selected").removeClass("selected");
$("#nav-contact").addClass("selected");
});
});
https://codepen.io/orchtechnerd/pen/dRzGZV // my codepen

Actually, your code works.
Unfortunately, the visible div is covered by the #nav.
So the only thing you should do is add a "padding-top: 4em" style to the body.

Flip effect condition

So I’m trying to figure out how to make a click effect work on mobile. I want the hover effect on desktop/laptop and the click effect on mobile.
Currently the hover effect is implemented. As you can see on my website's homepage: http://otownsend.ca/
What I need to figure out is how to implement the click effect at a certain screen size (e.g. 800px). So instead of the card flipping as soon as the curser hovers over ".flipper", the click effect would require the user to click ".flipper" in order for the card to flip. This would require me to place in a conditional statement - however, it isn’t working. I’m not so familiar with JQuery so it has been quite the challenge. This is what I currently have:
if (window.matchMedia('(max-width: 800px)').matches)
{
$('.flipper').click(function (e) {
$(this).toggleClass('flipped');
});
}
".flipper" is the parent element to the front and back. All the css and html is the same. I just need to integrate this JQuery stuff and then I’m set.
Any suggestions would be appreciated :)

You can use removeClass() and addClass(). I've also changed your click event with .on('click'). I recommend you to use it that way. Also, add the code in $(document).ready(). I hope this is what you need. If not, please let me know and I will try a different approach:
$(document).ready(function() {
$('.flipper').on('click', function(e) {
$('.flipped').removeClass('flipped');
$(this).addClass('flipped');
});
});
Regarding matchMedia you can see by running the test snippet that it works:
if (window.matchMedia('(max-width: 800px)').matches) {
$('.flipper').css('color', '#f00');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class='flipper'>
testing matchMedia
</p>
Also, I've seen that in your code, you are doing something wrong. You are adding a <script> tag which contains jQuery source, inside another <script> tag(or you forgot to close the </script> tag). This is wrong. Please correct this:
<script type="text/javascript">
$(function(){
$(".flipper").flip({
trigger: "hover"
});
});
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
To this:
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script type="text/javascript">
$(function() {
if (window.matchMedia('(min-width: 801px)').matches) {
$(".flipper").flip({
trigger: "hover"
});
}
});
</script>
Notice the media query added for desktop only, from 801px up.
As a suggestion, I would like to recommend you to use a library like Modernizr for the media query part. Using Modernizr's way of using media queries, you won't have to refresh the page to see the changes like when using matchMedia. This also helps when you switch from portrait to landscape on mobile devices. You can read the docs about Modernizr media queries here.

jQuery remove twice function call

Please consider this very simplified sample.
Below code remove a fixed nav bar from pages when screen size is small. It is named removeFixedNavbar().
This should be done when document is loaded and when window is resized. Please see the code. Well, this code seems some how ugly (calling removeFixedNavbar() twice, is it a better way to write it (with less code).
$(document).ready(function() {
removeFixedNav();
$(window).resize(function(){
removeFixedNav();
});
});

$(document).ready(removeFixedNav);
$(window).resize(removeFixedNav);
This should work, but i think it should be doable using CSS Media Queries only (depends upon the use-case).
Even simpler could be:
$(function(){
$(window).resize(removeFixedNav).trigger("resize");
});
Placing it at bottom most part can get rid of $(function(){...})
An other equivalent version can be:
$(function(){
$(window).trigger("resize");
});
$(window).resize(removeFixedNav);

Well you call it twice in document.ready.
Place window. resize outside document.ready event.

How to FORCE a resize event that will run all resize functions

I am using Masonry.js to create a masonry style blog. The problem with this is, when I click 'Article' for example, my JS makes everything but an article disappear. Instead of all the articles filling in the gaps that were previously filled with other post types, they just stay in the same position.
Once I resize the window Masonry.js does its thing and every gap becomes filled with the articles. My question is how to FORCE this to happen without having to resize the window manually?
Note:
I have tried this link
Forcing windows resize to fire
This will not work.

$(window).resize(function(){
$('span').text('event fired!');
});
$('button').click(function(){
window.dispatchEvent(new Event('resize'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>Fire event</button>
<span></span>

This must work (I'm using it right now)
$(window).trigger('resize');
Hope this helps.
EDIT
Note that's jQuery syntax.
EDIT 2
i make a research of masonry.js (I don't meet it before this post), and I think that you can solve this problem like this:
$(window).on('resize', function () {
$('#element').masonry('reloadItems');
});
$(window).trigger("resize");
Good luck

I managed to fix this.
$('#article-options li').on('click', function() {
setTimeout(function() {
var $grid = $('#blog-container').masonry({
columnWidth: 80
});
// change size of item by toggling gigante class
$(this).toggleClass('gigante');
// trigger layout after item size changes
$grid.masonry('layout');
}, 200);
});
Each 'section' of the blog of mine is in a ul called article options so when an option is clicked (therefore changed) it will run this function.
I have set a timeout as JS was running a bit behind and making me click twice for the code to run.
I defined a new masonry grid, I defined this as the overall blog container which holds all posts. I then had code in place which recognised the click function on a section and toggled a class which pops everything back into their correct positioning.
As for details, i'm not too sure as this is not my module. If anyone has any valuable information that might help others, comment and I will update my answer. Thanks everyone.

How do i hide html until its processed with javascript?

I am using some JS code to transform my menu into a drilldown menu.
The problem is before it runs the JS you see a BIG UGLY mess of links. On their site its solved by putting the js at the top. Using recommendations by yahoo/YSlow i am keeping the JS files at the bottom.
I tried hiding the menu with display:none then using jquery to .show(), .css('display', ''), .css('display', 'block') and they all lead up to a messsed up looking menu (i get the title but not the title background color or any links of the menu)
How do i properly hide a div/menu and show it after being rendered?

In the <head> place this:
<script>document.documentElement.className = 'js';</script>
Now, it will .js class to your html element. And it will be the very first thing done by the javascript on the page.
In your CSS you can write:
.js #menu {
display:none;
}
And then:
$(document).ready(function() {
$('#menu').css('display','block').fancyMenu();
});
This is an excellent technique, that allows you to make your pages "progressively enhanced", if your user has JavaScript disabled – she will still be able to see the content, and you can also separate non-JS styling with styling, that is relevant only for JS version of your menu, perhaps "position:absolute" and things like that.

At the top of your page put:
<script type="text/javascript">
document.write('<style type="text/css">');
document.write('#mylinks { display:none; }');
document.write('</style>');
</script>
And at the end of your "processing", call $('#mylinks').show();
document.write is evaluated as the DOM is processed, which means this dynamic style block will be registered in the style rules before the page is first displayed in the viewport.
This is a good case where progressive enhancement works really well - if your users have JS available & enabled, you hide the links until they are ready; but if not, they are still available, albeit ugly.

Life will be gentler with you if you try not to make pages that look like "a big ugly mess" without javascript. Have a heart.
Whatever yahoo says, it would probably be worth it for you to insert a little script that adds a style element with a few rules to the head of ypur document, before the body renders.

I found the solution. I should let the links be hidden with css then .show() BEFORE the ddMenu code executes instead of after. The ddMenu seems to check the parents width and sinces its hidden i guess its 0. The time between .show() and ddMenu is fast enough not to show the ugly links (on my machine/browser). The the majority of the time (page loading, http req for the JS files, JS compiling/exec etc) the links are hidden so it looks pretty good.
$(function () {
$('.menuT1').show(); //do it before not after in this case.
$('.menuT1 > ul').ddMenu({

Well, If you are familiar with jquery then I would do something like this
$("#mybuttom").click(function() {
$("#mydiv").hide(); //hide the div at the start of process
$.post( "mypostpage.php",
{ testvar: testdata },
function(data) {
//callback function after successful post
$('#mydiv').show(); //show it again
}
);
});