Develop Reference

how to load my page with sidebar hidden

I have created a sidebar that hides with the .click() function targeting an image with the id of "cross".
It is my goal to have page load with no sidebar (.sidebar_menu) visible, and with my menu hamburger (.bars) visible . How do i do this?
HTML:
<img class="bars toggle_menu" src="http://res.cloudinary.com/dnooxiorz/image/upload/v1502388038/thinbarsfinal_knx5mw.png">
<div class="sidebar_menu">
<img id="cross" src="http://res.cloudinary.com/dnooxiorz/image/upload/v1502391349/cross_tcn6yk.png">
<center>
<h1 class="boxed_item">HELLO</h1>
</center>
<ul class="navigation_selection">
<li class="navigation_item">Projects</li>
<li class="navigation_item">About</li>
<li class="navigation_item">Resume</li>
</ul>
</div>
Javascript:
$(document).ready(function(){
$("#cross").click(function(){
$(".sidebar_menu").addClass("hide_menu");
$(".toggle_menu").addClass("opacity_one");
});
$(".toggle_menu").click(function(){
$(".sidebar_menu").removeClass("hide_menu");
$(".toggle_menu").removeClass("opacity_one");
});
});
Best,
John

Try this -
$(document).ready(function(){
var hideSideMenu = function(){
$(".sidebar_menu").addClass("hide_menu");
$(".toggle_menu").addClass("opacity_one");
};
hideSideMenu();
$("#cross").click(function(){
hideSideMenu();
});
$(".toggle_menu").click(function(){
$(".sidebar_menu").removeClass("hide_menu");
$(".toggle_menu").removeClass("opacity_one");
});
});
Basically, you need to perform the action performed inside your #cross click function, also on the document load to have that as an initial state.
Wrapping it in a function will help you keep the functionality to be executed upon close all in one place. I recommend you do similar for showing the side menu by wrapping the actions in a function and calling it like above.

You can try adding the classes in the HTML page, so It loads with the sidebar hidden.
<div class="sidebar_menu hide_menu">...</div>
<img class="bars toggle_menu opacity_one" src="...">
Or you can use:
$("#cross").click();
Inside $(document).ready(); so when it loads, the image that toggles the sidebar gets clicked.

Just add tge hide_menu class in your mark-up:
<div class="sidebar_menu hide_menu">

Display image with actual sizes onclick

Before posting here i was testing over 30 or so Jquery image plugins to make my images appear full width when clicked on.
the structure of the HTML is as follows:
<div class="whatever">
<img id="noonecares" src="pff"></img>
</div>
and not
<img ></img>
I'm not talking about zooming in the photos but displaying the whole image onclick instead
I'm looking for a Jquery solution preferably.
The solutions that i've been looking into are: zoomfancy easyzoom ajaxzoom ...
Thank y'all

If you just want a simple inline image expander then jQuery's toggleClass() is perfect for that. You shrink the images to a fixed size with CSS and then toggle it with a click.
DEMO

Something like
<div>
<img src="http://t1.gstatic.com/images?q=tbn:ANd9GcRvA_rqizvEgVJhJwLbpgMz7CgGwnjW5BlXHrBNzRwRXsq7O3Gi" />
</div>
script
$("div").on("click", function() {
window.open($("img").attr("src"), "_blank", "menubar=1,resizable=1");
});
?
jsfiddle: http://jsfiddle.net/chrisbenseler/6GW6M/

This is my approach.
<div class="whatever">
<img id="noonecares" src="http://imagizer.imageshack.us/v2/100x75q90/21/0ss1.jpg"></img>
</div>
Script
$('.whatever').on('click','#noonecares', function(){
window.open($(this).attr('src'));
});
JSfiddle: http://jsfiddle.net/hFp6z/
UPDATE: If you want a plugin to zoom full size, then you can check fancybox or lightbox.

Javascript onmouseover/onmouseout Loop

I'm having The following issue, this code:
<div class="image-container">
<div id="over-1" class="glass" onmouseout="$(this).stop().fadeOut();"></div>
<img src="img.jpg" onmouseover="$('#over-1').stop().fadeIn();" />
</div>
The mouse over and mouse out works fine, however on occasion the overlay image fades back in by itself after fading out, I have searched for a solution, so far being told to use jquerys hover function etc and similar, however so far no solution.
Can anyone help?

Set an additional fadeOut() call on the container "image-container" and it'll solve the issue
$(document).on("mouseover", ".image-container", function(){
$("#over-1").fadeOut();
});
Fiddle

change the opacity of another image inside of another div by hovering over another div image

Is this too complicated to achieve? Hopefully my question or title makes sense. Essentially I have two divs - one is and the other is . I have 12 images inside of each div that I thought I attached IDs to. I'm still much of a noob to web coding so perhaps I'm labeling them wrong. But here's my goal, whenever you hover over artwork1, the opacity of artwork1 and button1 should change simultaneously. And the effect needs to be achieved the other way as well (ie hover:button1 should change the opacity of artwork1). Below is my code to explain my case further:
<html>
<body>
<div id="buttons">
<img src="..." class="spaced"(to spaced the buttons)>
<img src="..." class="spaced">
<div id="artwork">
<img src="..." class="mainbuttons & greydout"
<img src="..." class="mainbuttons & greydout">
The 'mainbuttons' class is for spacing between the 12 images. And the greydout class is to alter the hover effect already in place - going from opacity 0.3 to 1.
I've tried to research some javascript as I'm thinking that's the most proper solution. My javascript I've tried to use is as follows:
$(document).ready(function() {
$("#button1").mouseenter(function(){
$("#artwork1").addClass("opac_art");
});
$("#button1").mouseleave(function(){
$("#artwork1").removeClass("opac_art");
$("#artwork1").addClass("greydout")
});
});
One more thing to consider is that I have multiple scripts running for various functions:
1) a redirect script that will redirect mobile viewers to the mobile site;
2) a respond script that reformats the viewport to whatever the viewer's resolution browser size is set to.
I have the jQuery loaded up at the top of the document, but could there be conflict with the other scripts running on the html page?
I've even tried going the CSS route and I can barely get the divs to interact with each other. The closest I've come is when I hover in the button div, I can alter artwork 1, but not as specific as I'm aiming for. I hope all this makes sense, and thanks in advance for reading all this and trying to help me through this huge roadblock to getting my site up.

Try something like this.
Add a class to your buttons (galleryButtons) and to your images in the other div.
First of you do not really need the wrapping with the a tag
Add classes to your button elements and artwork.
<div id="buttons">
<img id="gbutton1" class="galleryButtons" src="button.png" />
<img id="gbutton2" class="galleryButtons" src="button.png" />
<div id="artwork">
<img id="artwork1" class="artworkImage" src="art1.jpg" />
<img id="artwork2" class="artworkImage" src="art2.jpg" />
$(document).ready(function () {
var intID;
$(".galleryButtons").hover(function (e) {
console.log(e.target.id);
var id = e.target.id;
intID = id.replace(/^\D+/g, '');
$("#artwork" + intID).addClass("opac_art");
}, function () {
$("#artwork" + intID).removeClass("opac_art").addClass("greydout");
});
$(".artworkImage").hover(function (e) {
var id = e.target.id;
intID = id.replace(/^\D+/g, '');
$("#gbutton" + intID).addClass("opac_art");
}, function () {
$("#gbutton" + intID).removeClass("opac_art").addClass("greydout");
});
});
All for you in a fiddle: http://jsfiddle.net/djwave28/et6tD/4/
It can be made simpler with selecting smarter, but I wanted you to see the relation in the element better. When you hover over an element, the element that causes the event is send to the function. This event contains information. Like e.target.id will hold the id of that element.
http://www.w3schools.com/jsref/dom_obj_event.asp

From what I'm understanding of your question, you could do something like this:
$(document).ready(function()
{
$("#one").hover(function()
{
// Changes the opacity of the first image
// as well as the corresponding link from
// 1 to 0.3.
$("#artone").css({ "opacity": "0.3" });
$(this).css({ "opacity": "0.3" });
});
$("#two").hover(function()
{
$("#arttwo").css({ "opacity": "0.3" });
$(this).css({ "opacity": "0.3" });
});
});
And the HTML would look something like this:
<div id="links">
Link one
Link two
</div>
<div id="artwork">
<img src="" id="artone" class="spaced">
<img src="" id="arttwo" class="spaced">
</div>
Couple extra things -
Make sure you actually link jQuery into your page's header, I didn't see it above:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
That's from Google's CDN, but you can do it locally, of course.
<img src="#" class="mainbuttons & greydout">
When listing classes for an element, you don't add an ampersand (&), you just leave them with a space in between.
<img src="#" class="mainbuttons greydout">

JQuery Fade out & content replace

I'm currently working on a recommend box for my tumblr. I have a slight issue though. On my blog I have a recommend box that floats on the left of the blog div, #cage. When you click yes, it redirects to a recommend link. When you hit no, I JUST want the div to fade out. For me, once I click no, it fades out fine, but then the #cage div moves over to the left and replaces the space that #recommend was in. Is there any way to just simply fade out the div, then once it's faded out, replace it with an INVISIBLE div, (the same size as #recommed) to it just fades out & the content doesn't move? Thanks. Here's what I have so far, hopefully someone can help.
<div id="recommend">
<img id="Recommend" src="http://i56.tinypic.com/2z7nz9e.png" usemap="#Recommend" border="0" width="200" height="200" alt="" />
<map id="Recommend" name="Recommend">
<area shape="rect" coords="78,113,142,163" href="http://www.tumblr.com/directory/recommend/entertainment/epicjamess" alt="Yes" title="Yes" />
<div id="no"><area shape="rect" coords="144,113,195,163" href="#" alt="No" title="No" /></div>
</map>
</div>
<script>
$("#no").click(function () {
$("#reccommend").fadeOut("fast");
});
}
</script>

Instead of fading, change the opacity:
$("#reccommend").animate({opacity: 0}, 200);
The second argument is the duration of the animation in milliseconds.

U could try
$("#reccommend").animate({opacity: 0}, fast );
But keep in mind, opacity is not supported by all browsers.

Opacity also causes issues with text in IE... Maybe try this:
<script>
$("#no").click(function () {
//wrap it in a div with an id
$("#reccommend").wrap('<div id="reccomend-wrap" />');
//set width of the wrapper to match width of #reccomend, and float it
$("#reccommend-wrap").width($("#reccomend").width()).css("float","left");
//now fade the #recommend out
$("#reccommend").fadeOut("fast");
});
}
</script>
EDIT: To prevent jumpiness it might actually be best to have #reccomend-wrap have the same CSS as #reccomend in your CSS file, rather than adding the float property on the fly..