I am new to web design. I am making my resume now. I have navigation div like this:
<div id="nav" class="grid_12">
<div id="Home" class="grid_3">
<div class="button">
Home
</div>
</div>
<div id="Life" class="grid_3">
<div class="button">
Life
</div>
<img src="img/someimg.jpg">
</div>
<div id="Portfolio" class="grid_3">
<div class="button">
Portfolio
</div>
</div>
<div id="Contact" class="grid_3">
<div class="button">
Home
</div>
</div>
</div>
Then I have a script for the navigation:
<script type="text/javascript>
$("#nav img").hide();
$(".button").focus(function() {
$(this).next("img").fadeIn("slow");
}).blur(function() {
$(this).next("img").fadeOut("slow");
});
</script>
I want it so when someone holds the mouse over the button the image will appear under it. It is properly hiding the image, but fadeIn not working. I have no idea why it is not working.
.focus is bound to the "focus" event (I linked to a description of what it is rather than the event standard). This is most common when you tab to or click on text inputs, but it can apply to other elements as well.
The mouseenter (also mouseover, but the former is not triggered repeatedly when child elements are also hovered) event occurs when a mouse enters an element. The opposite is mouseleave (mouseout). http://api.jquery.com/mouseenter/
try putting your script inside a ready event of the document :
<script type="text/javascript>
$(document).ready(function(){
$("#nav img").hide();
$(".button").focus(function() {
$(this).next("img").fadeIn("slow");
}).blur(function() {
$(this).next("img").fadeOut("slow");
});
});
</script>
I believe you're using the 960gs, and one thing I have noticed is this: your four grid_3 divs are nested within your grid_12. The 960gs includes two classes called .alpha and .omega to fix the nested margins when a grid is inside a parent grid. You need to put the .alpha class on the first child div - which in this case is your <div id="#home"> and the .omega class on the last child div which is your <div id="Contact">. This will fix the margins you will have on the internal nested four grid_3's.
Related
I'm learning jquery and i have this little issue with selectors.
This is my DOM structure:
<li>
<header class="title">
<span>Text</span>
My trigger
</header>
<div id="work-1">
<div class="description">
<p>some shit about the work</p>
</div>
<div class="carousel">
<img/>
<img/>
<img/>
...
</div>
</div>
</li>
ok. Its a simple list with a lot of links with my works. every item has its description and some pictures that goes on a carousel.
when I click on the link, i want to create a variable in jquery that get the carousel. I write this but it doesnt work:
$('a').click(function(e){
var href = $(e.target).attr('href');
// this is to make my div#work toggle from display:none to block.
var carousel = $(href).find('.carousel');
// this is the wrong code. I cant reach the carousel from there.
});
Thanks for help!
This should work:
$('a').click(function(e){
var carousel = this.parents('li').find('.carousel');
});
Inside the click handler, "this" refers to the A-element which was clicked. Find the LI-element which is the parent of the A element which was clicked and then search for the carousel which is a child element of that LI element.
use this instead, carousel its a diferent element
$('.carousel')
You have to go back (with .parent()) twice or use .parents until it finds the li tag.
$('a').click(function(){
var href = $(this).attr('href'),
li = $(this).parents('li'),
carousel = li.find(href).find('.carousel');
console.log(carousel);
carousel.css('background-color', 'red');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<header class="title">
<span>Text</span>
My trigger
</header>
<div id="work-1">
<div class="description">
<p>some shit about the work</p>
</div>
<div class="carousel">
<img/>
<img/>
<img/>
</div>
</div>
</li>
</ul>
by the way, your script works for me as well:
https://jsfiddle.net/rozgwq8e/
but you could use $(this) instead of e.target.
I am trying to call a function to add class hover to a link outside the scope of the carousel when an image inside has the class active. The active class iterates over each item, toggling on and off every 3 sec.
How can i add the class when the item is active?
JS FIDDLE LINK
jsfiddle.net/vnpm1y06/222
var test = $('.active');
function linkHover() {
if ($('.item.active').length != 0) {
$('#link3').addClass('hover');
}
};
linkHover();
.hover {
color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel">
<div id="slide1" class="item">
<img src="img1.jpg">
</div>
<div id="slide2" class="item">
<img src="img2.jpg">
</div>
<div id="slide3" class="item active">
<img src="img3.jpg">
</div>
</div>
<div class="nav-links">
<a id="link1">Link</a>
<a id="link2">Link</a>
<a id="link3">Link</a>
</div>
Since you are using owl-carousel, you should not find a way to call something out of scope, you should look for ways to capture events and then add your code on those events.
You can check owl carousel - event docs for events and their signature.
In your case, you need change event:
owl.on('changed.owl.carousel', function(event) {
...
})
Now as per your fiddle, I have added an extra link as you have 5 sliding divs and 4 links.
You can refer following JSFiddle for working demo.
I'll try to find a better and more generic way to get current element's index. You can use $('.link.active').removeClass('hover').next().addClass('hover'), but this will need more refining.
Let me know if you have any queries.
I am using JQM and I have a situation where I have HTML generated dynamically. It's possible, even probable that the same HTML will be used in more that one place on the page. I have a div with data in it that I only want to be displayed when the user clicks the header div. IE:
<html>
<head>
<style>
</style>
<script src="/js/jquery.js"></script>
</head>
<body>
<div onclick="$(this).children('div:first').toggle();">This is Div 1</div>
<div style="display:none">
<p>I'm hidden</p>
</div>
</div>
</body>
</html>
What I'd like to do is when the user clicks on the Click Me link the child toggles its display on and off. Any thoughts on how this can be accomplished without some convoluted ID scheme? (I've thought of at least two).
According to the code you posted, the div containing "I'm hidden" is not a child of the first div.
You can use $.eq() to select a specific children index: https://api.jquery.com/eq/
<div onclick="$(this).children('div').eq(0).toggle();">
This is Div 1
<div style="display:none">
<p>I'm hidden</p>
</div>
</div>
See working JSFiddle (with "hidden div" child of Div1)
If you need to toggle visibility of a sibling, you can use $.siblings() https://api.jquery.com/siblings/ or $.next() https://api.jquery.com/next/
<div onclick="$(this).next().toggle();">
This is Div 1
</div>
<div style="display:none">
<p>I'm hidden and I'm a sibling</p>
</div>
See JSFiddle2 (hidden div sibling of Div1)
you can tie an event to the Click Me and in javascript/jquery, find the first child div after "this" (the div that was clicked). Something like this:
$(this).children("div:first");
This is roughly my setup:
<div class="wrapper">
<div class="first">
<a class="button" href="">click</a>
</div>
<div class="second">
<div class="third">
Stuff
<div>
</div>
</div>
Ok, so what I want to is this: when you click the a tag, the .third div should animate.
What I have so far is this:
button.click ->
third.animate
left: '+=100%'
The problem is, I have multiple of these wrappers on one page. So when I click the button, every '.third' div on the page animates. How can I select the right one and only that one?
Thanks!
Try this:
$('a').click(function(){
var third = $(this).closest('.wrapper').find('.third');
//use third variable to animate
});
You can use closest or parents.
If you want only one div to animate, assign an id to the div and animate only that one by$("#third").animate("left", "100%");
I have this JS code:
function overlay() {
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
which opens up a new window on click. What I want it to do next from that first click is go to another function. That function entails a scroller that has 5 divs in it. Say I want it to go to the third div or ID, how would I go about writing that type of function? So a HTML example would be:
<div id="this">
<div class="outer">
<div class="innerdiv">
<div class="1" id="1">1</div>
<div class="2" id="2">2</div>
<div class="3" id="3">3</div>
<div class="4" id="4">4</div>
<div class="5" id="5">5</div>
</div>
</div>
</div>
This would represent my scroller. So on that initial first click, the idea is that it would open up a new window and scroll to that 3rd div, or if scrolling to it is to difficult, then go to that first div. http://jsfiddle.net/qYTK4/
<div class="arrowbox">
<div style="display:inline-block; width:155px; height: 50px; float:left;"></div>
<div class="leftbox" id="leftbox"></div>
<div class="backtohome">BACK TO HOME PAGE</div>
<div class="rightbox" id="rightbox"></div>
Using window.scrollTo() and move it to the objects position. Retrieve the position (X,Y) of an HTML element
jQuery.ScrollTo is a great, simple plugin for smooth scrolling animations. It has tons of options for ways to define the scroll behavior and is pretty easy to use. There are a ton of demos and examples on the site linked you should be able to use. In yours you would just tell it to scroll to either the DOM element itself or jQuery object/selector for the 3rd div.
Also, you can't have id attributes start with numbers (like your divs), it's not valid. Classes can but not IDs.
It is also a good idea to rely on click event handlers (i.e. $('.backtohome a').on('click', function() { // your code });) rather than onclick attributes.