We Keep Coding

Onclick set element to relative, else set other divs as absolute

I am trying to set an element to relative onclick. The code I have works in setting my div to relative, but I need to reset the other divs back to being positioned absolute. So far I have ...
<div class="case-studies">
<section class="pagination">
<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>
</section>
<div class="case-study" style="background:blue;"></div>
<div class="case-study" style="background:green;"></div>
<div class="case-study" style="background:orange;"></div>
<div class="case-study" style="background:pink;"></div>
</div>
$('.pagination div:first-of-type').on('click', function() {
$('.case-study:first-of-type').css("position", "relative");
});
$('.pagination div:nth-of-type(2)').on('click', function() {
$('.case-study:nth-of-type(2)').css("position", "relative");
});
$('.pagination div:nth-of-type(3)').on('click', function() {
$('.case-study:nth-of-type(3)').css("position", "relative");
});
$('.pagination div:last-of-type').on('click', function() {
$('.case-study:last-of-type').css("position", "relative");
});

You dont need to have multiple events for each element. you can use index of clicked element to filter from .case-study set:
var $caseStudies = $('.case-study');
$('.pagination div').on('click', function() {
$caseStudies.css("position", "absolute");
$caseStudies.eq($(this).index()).css("position", "relative");
});
You can also narrow down the code to:
$caseStudies.css("position", "absolute").eq($(this).index()).css("position", "relative");

Vanilla JS:
let section = YourSection
section.onclick = event=>{
if (event.target.nodeName.tolowerCase() !== yourChildNodesName) return false
Array.from(event.target.parentNode.children).forEach(node=>{
node.style.position = node === event.target ? 'relative' : 'absolute'
})
}

How to hide multiple jQuery toggle() when I click outside of the menu?

I have multiple toggle elements on my page. I am trying to get them closed when clicking on the outside of the div element. the script i have now works veyr well with multiple elements but it also closes the div when clicking on inside of the div
<ul>
<li class="menuContainer">
<a class="top" href="#">Menu</a>
<div class="sub">
<a class="top" href="google.com">item in dropdown menu with valid url when clicked here div.sub should stay close</a>
</div>
</li>
<li class="menuContainer">
<a class="top" href="#">Menu</a>
<div class="sub">
<a class="top" href="#">item in dropdown menu when clicked here div.sub should stay open</a>
</div>
</li>
$(document).ready(function(){
$('li.menuContainer').each(function() {
var $dropdown = $(this);
$("a.top", $dropdown).click(function(e) {
e.preventDefault();
$div = $("div.sub", $dropdown);
$div.toggle();
$("li.menuContainer div.sub").not($div).hide();
$( "#effect" ).hide();
return false;
});
$("li.menuContainer div.sub").on("click", function (event) {
event.stopPropagation();
});
});
$(document).on("click", function (){
$("li.menuContainer div.sub").hide();
});
});
what i want to do is to stop closing div when clicked inside of it. Any help please?

I think you are looking for e.stopPropagation();. Use it in an event on the child items.
This will stop the event from propagating to the parent div.

In your code the problem is inside the following function, now corrected:
$('html').click(function(event){
var ele = event.target.tagName + '.' + event.target.className;
if (ele != 'DIV.sub') {
$("li.menuContainer div.sub").hide();
}
});
Like you can see now when you click on whatever html element a check is done to prevent the undesired action.

use this code
$("li.menuContainer > a.top").click(function(e) {
e.preventDefault();
$div = $(this).next("div.sub");
$("li.menuContainer div.sub").not($div).slideUp();
$div.slideDown();
});
instead of
$('li.menuContainer').each(function() {
var $dropdown = $(this);
$("a.top", $dropdown).click(function(e) {
e.preventDefault();
$div = $("div.sub", $dropdown);
$div.toggle();
$("li.menuContainer div.sub").not($div).hide();
return false;
});
});
and about
$('html').click(function(){
$("li.menuContainer div.sub").hide();
});
you can use
$(window).on('click',function(e){
if (!$("li.menuContainer").is(e.target) // if the target of the click isn't the container...
&& $("li.menuContainer").has(e.target).length === 0) // ... nor a descendant of the container
{
$("li.menuContainer div.sub").slideUp();
}
});
Working Demo
Update:
$("div.sub > a.top").on('click',function(e) {
e.preventDefault(); // prevent page from reloading
e.stopPropagation(); // prevent parent click
alert('Here We Are :)');
});
Working Demo

Javascript to change class in <ul> tag not working

Based on the size of the window, I'm trying to alter the class of a tag:
<ul id="navul" class="nav navbar-nav">
and making it instead be:
<ul id="navul" class="nav nav-pills">
This is what I am trying, and isn't working:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
$(window).resize(function () {
$("count").text(x += 1);
if ($window.width() < 768) {
$('#navul')
.removeClass('navbar-nav')
.addClass('nav-pills');
};
if ($window.width() > 769) {
$('#navul')
.removeClass('navbar-pills')
.addClass('nav-bar');
};
});
});
</script>
I've also tried wrapping it inside
$(document).ready(function () {
....
});
From watching DOM in dev tools, it would seem as if the script is not firing at all. I'm probably missing something simple.
EDIT:
I used this as my starting template:
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_resize
This script works perfectly without $(window) being declared.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
x = 0;
$(document).ready(function(){
$(window).resize(function(){
$("span").text(x += 1);
});
});
</script>
<p>Window resized <span>0</span> times.</p>

There is nothing like $window and it will give you error and wont run the script change $window.width() to
$(window).width()
$window will give you error of undefined

Maybe because your $window variable is undefined?
Try this:
<script type="text/javascript">
var $window = $(window);
$window.resize(function () {
if ($window.width() < 768) {
if ($('#navul').hasClass('navbar-nav')) {
$('#navul').removeClass('navbar-nav').addClass('nav-pills');
}
};
if ($window.width() > 769) {
if ($('#navul').hasClass('nav-pills')) {
$('#navul').removeClass('nav-pills').addClass('navbar-nav');
}
};
});
</script>

$(window).resize(function () {
$('#navul')
.removeClass('navbar-nav nav-pills')
.addClass(($(window).width() < 768 ) ? 'nav-pills' : 'navbar-nav');
});

Product Zoom Effect WooCommerce

Im trying to create a zoom effect like this http://jsfiddle.net/SWDhG/
But I'm trying to open the <a href="imglink"> link not the <img src=""> tag, so i need som help with jquery.
html:
<div class="images">
<a href="http://us.123rf.com/400wm/400/400/teddy2007b/teddy2007b0903/
teddy2007b0903‌​00008/4539531-cup-and-bouquet-of-flowers-decorative-floral-
background-for-banner-‌​vector.jpg" class="zoom" title="">
<img src="http://3.bp.blogspot.com/-BKBDFTVyTVs/TdmU9SuHU5I/AAAAAAAAASk/
e7oUIN34cc4/s‌​320/blue+salvia.jpg" class="attachment-shop_single wp-post-image"/>
</a>
</div>
This is the original code
$(function() {
$('li a').click(function() {
$('div img').attr('src', $(this).find('img').attr('src'));
$('div').show();
return false;
});
$('div').mousemove(function(e){
var h = $(this).find('img').height();
var vptHeight = $(document).height();
var y = -((h - vptHeight)/vptHeight) * e.pageY;
$('div img').css('top', y + "px");
});
$('div').click(function(){
$('div').hide();
});
});

http://jsfiddle.net/SWDhG/36/
Here's a fiddle that does what you want.
$(function() {
$('li a').click(function() {
//here's the change -->
$('div img').attr('src', $(this).attr('href'));
// we change the information we take from the element to the
// href attribute of the element, $(this), which is assigned
// to the element that caused the event, the anchor tag
$('div').show();
return false;
});
$('div').mousemove(function(e){
var h = $(this).find('img').height();
var vptHeight = $(document).height();
var y = -((h - vptHeight)/vptHeight) * e.pageY;
$('div img').css('top', y + "px");
});
$('div').click(function(){
$('div').hide();
});
});
I used my own demo image href attribute for the sake of brevity.

To get the hyperlink address:
$('li a').click(function() {
var link = $(this).attr('href');
// do something with it
return false;
});

Change height and slide down a textarea

Upon clicking on a textarea, I need it to change the height of the textarea to 60px and slide down at the same time so it all looks like one smooth animation.
Here's the JSFiddle: http://jsfiddle.net/MgcDU/6399/
HTML:
<div class="container">
<div class="well">
<textarea style="width:462px" placeholder="Comment..."></textarea>
</div>
</div>
Thanks. :)

The method you need is called animate() and is well documented.
Now for your fiddle, I wrote the jQuery code that demonstration the animate method plus the focus() and blur() methods:
jQuery(document).ready(function ($){
var element = $('.well textarea');
var orig_height = element.height();
var new_height = 60;
// onfocus event handler
element.focus(function (){
$(this).animate({height: new_height + 'px'});
});
// onblur event handler
element.blur(function (){
$(this).animate({height: orig_height + 'px'});
});
});

Something like this?
$('#comment').click(function() {
$(this).css('height', '60px');
});

It works much better as an animate...
$("textarea").on('focus',function (e, ui) {
$(this).animate({
height: "60px"
}, 1500);
});
jsFiddle Demo

$('#comment').click(function () {
$(this).fadeIn(3000, function() {
$(this).css('height', '60px');
});
$(this).focusout(function() {
$(this).css('height', '20px');
});
});