Let's say this is my html:
<div class="picture_holder_thumb">
<div class="picture"> <img></div>
<div class="captioning"><div class="title" display: none; ">TITLE</div></div>
</div>
This creates a visual Index of Thumbnails as can be seen here:
www.cyrill-kuhlmann.de/index.php/projects
I have a JS that shows the title of each thumbnail according to the cursors position:
script type='text/javascript'>
var mouseX;
var mouseY;
$(document).mousemove( function(e) {
mouseX = e.pageX;
mouseY = e.pageY;
});
$(".picture_holder_thumb").mouseover(function(){
$(".title").css({'top':mouseY,'left':mouseX}).fadeIn('slow');
});
$(".picture_holder_thumb").mouseout(function(){
$(".title").fadeOut('slow');
});
</script>
This is the CSS:
.captioning .title {
position: relative;
z-index:1;
color: #FFF;
display: none;
}
And it works, but the problem is that it shows ALL Titles at once! How can I achieve that it only shows this ".title" that "lies in" the .picture_holder_thumb that I am hovering?
Is that possible? Unfortunately I can't change the classes in to ID's because of the CMS structure…
Use this as the context to the selector.
Try,
$(".title", this)
instead of
$(".title")
Full code would be,
$(".picture_holder_thumb").mouseover(function(){
$(".title", this).css({'top':mouseY,'left':mouseX}).fadeIn('slow');
});
$(".picture_holder_thumb").mouseout(function(){
$(".title", this).fadeOut('slow');
});
try this -
$(".picture_holder_thumb").mouseover(function(){
$(this).children(".title").css({'top':mouseY,'left':mouseX}).fadeIn('slow');
});
Related
I am trying to make a div .description that appears where the mouse is as it hovers over an element.
So far, I have this code for making the div appear in a fixed location:
$('.tooltip').mouseover(function(e) {
// var to link tooltips and hand to description
var target = $(this).attr('data-show');
// hide current description if showing
if ($('.description').is(':visible')) {
$('.description').fadeOut(0);
};
e.stopPropagation();
$('#' + target).fadeIn(400);
});
$('body').mouseover(function(){
$('.description').fadeOut(0);
});
It works fine, but instead of just have .description appear, I need it to appear where the mouse hovers.
I tried adding this function:
function divPosition (event){
// pass mouse position to description div css
$(".description").css({top: event.clientY, left: event.clientX- 200});
};
but it didn't work. I also tried adding the line within the function but i'm not sure how to pass the event argument.
Please see my JSfiddle: https://jsfiddle.net/bns4zp1q/2/
You can listen to the mousemove event, and use your divPosition function.
https://jsfiddle.net/agbuLop1/
$('.tooltip').mousemove(divPosition);
function divPosition (event){
// pass mouse position to description div css
$(".description").css({top: event.clientY, left: event.clientX- 200});
};
Does the description really have to follow the mouse movement or just appear at hovered circle? Here is a quick and dirty example without javascript:
https://jsfiddle.net/k9jpqom2/1/
(new) HTML:
<div class="tooltip-container">
<div class="image" id="machine1">
<img src="http://axevilw.sellamachine.com/EnhFiles/advert/182/Machine.jpg/Machine.jpg">
<div class="tooltip" id="tooltip1" data-show="description1">1
<div class="description-container">
<div class="description" id="description1">
LED Strip Lighting
</div>
</div>
</div>
</div>
</div>
(additional) CSS
.description-container {
width:1px;height:1px;position:relative;
}
#tooltip1:hover .description {
display:block;
width:10em;
position:absolute;
left:-4em;
height:auto;
}
.tooltip{
width:5%;
height: 6%;
}
If you don't want to edit the HTML you can try something like this:
https://jsfiddle.net/g2p5g2r4/2/
.tooltip .description-container {
width:1px;
height:1px;
}
#tooltip1:hover + .description-container #description1 {
display:block;
width:10em;
position:absolute;
height:auto;
top: 36%;
left: 25%;
}
#tooltip1 {
top: 31%;
}
You will have to fine tune the position of #description1, #description2, etc...
I'm trying to create a roll up div while mouse is over another div. It opens but I'd like it not to close when leaving through the bottom border. Is it possible using JS or JQuery? Here is my current code:
$("#sell1").mouseenter(function(){
$("#rollup1").css("display","inline");
});
$("#rollup1").mouseleave(function(){
$("#rollup1").css("display","none");
});
$("#sell1").mouseleave(function(){
$("#rollup1").css("display","none");
});
When processing the mouseleave, you can get the dimensions of the element and see whether the event's pageY is below the element:
$("#rollup1").mouseenter(function() {
$("#status").text("Over the element...");
});
$("#rollup1").mouseleave(function(e) {
var $this = $(this);
var bottom = $this.offset().top + $this.height();
if (bottom < e.pageY) {
$("#status").text("Left via bottom edge");
} else {
$("#status").text("Left NOT via bottom edge");
}
});
#rollup1 {
width: 50px;
height: 50px;
border: 1px solid black;
}
<div id="status"> </div>
<div id="rollup1"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
I have a very long article page that I want to help mobile users scroll on. For very long lists in mobile apps there's usually a alphabetical index that can help users jump to various places in the list. How do I implement something like that for a webapp?
If it helps my stack is angularjs / jquery / phonegap.
Just use angular's built-in $anchorScroll service.
See the live example in angular's official docs. Here are the important pieces of code:
In your view template:
<div id="scrollArea" ng-controller="ScrollCtrl">
<a ng-click="gotoBottom()">Go to bottom</a>
<a id="bottom"></a> You're at the bottom!
</div>
In your controller:
function ScrollCtrl($scope, $location, $anchorScroll) {
$scope.gotoBottom = function (){
// set the location.hash to the id of
// the element you wish to scroll to.
$location.hash('bottom');
// call $anchorScroll()
$anchorScroll();
};
}
iOS7 Style List Navigator
If you want something nice on the phone, I just wrote this iOS7 style list navigator. I think the way Apple solved the problem is very straightforward. So we steal it.
It's written considering that you won't probably scroll the body, because in the many designs I've seen for smartphones, scrolling a container allows you to have fixed headers and footers for Android < 4 without getting mad.
A word of warning: this code is really fresh and untested.
SEE DEMO AND CODE
CSS (extract)
#scrolling {
padding-top: 44px;
overflow: scroll;
-webkit-overflow-scroll: touch;
height: 100%;
}
.menu {
position: fixed;
right: 0;
font-size: 12px;
text-align: center;
display: inline-block;
z-index: 2;
top: 58px;
}
.list .divider {
position: -webkit-sticky; /* will stop the label when it reaches the header */
top: 44px;
}
HTML (extract)
<div id="scrolling">
<ul class="menu">
<li>A</li>
<li>B</li>
<li>C</li>
<!-- etc -->
</ul>
<ul class="list">
<li class="divider" id="a">A</li>
<li>Amelia Webster</li>
<li>Andrew WifKinson</li>
<!-- etc -->
Javascript (zepto/jquery)
$(function() {
$(window).on("touchstart touchmove mouseover click", ".menu a", function(e) {
e.preventDefault();
clearInterval(t);
var steps = 25;
var padding = 68;
var target = $( $(this).attr("href") ).next("li");
if ( target.length > 0 ) {
var scroller = $("#scrolling")[0];
var step = parseInt((target[0].offsetTop - padding - scroller.scrollTop)/steps);
var stepno = 0;
setInterval( function() {
if ( stepno++ <= steps ) {
scroller.scrollTop += step;
} else {
clearInterval(t)
}
}, 20);
};
});
});
It performs a basic check of link validity before attempting the scroll. You can change padding to your needs.
Also, you will notice that we are targeting the first element after the required target. This is because Safari seems to go nuts because of the sticky positioning.
This code uses jQuery/Zepto selectors for the sake of brevity and readability. But these libraries are not really needed to achieve the result. With just a little extra digitation you could easily go dependency-free.
http://codepen.io/frapporti/pen/GtaLD
You can use a toggleable sidebar like this one. Resize your browser to the width of the screen of a mobile phone to understand what I mean.
Then create a directive in angularjs to wrap jQuery's animate function to scroll to a specific part in the article. Like this:
angular.module('yourModule', [])
.directive('scrollTo', function() {
return {
restrict : 'EA',
link: function(scope , element, attr){
$('html, body').animate({
scrollTop: $( attr['href'] ).offset().top
}, 300);
}
};
});
where href will be an id of a specific section in the article. Then all you need to do is apply the directive to the links in the sidebar.
...
<li><a href="#section-1" scroll-to>Jump to section 1</a></li>
...
Hope this helps.
This might be what you're looking for http://www.designkode.com/alphascroll-jquery-mobile/
Haven't used it myself, but seems pretty simple to get going with.
I think something like this could work for you: http://codepen.io/aecend/pen/AsnIE. This is just a basic prototype I put together to answer but I could expand on the concept if needed. Basically, it creates a translucent bar on the right side of the screen, finds each of the headings for articles (which would need to be adapted to suit your needs) and places clickable/tappable anchors to jump to individual articles. When you click one, the page scrolls to that article. I have a few ideas to make this actually usable, but here's the proof of concept.
CSS
#scrollhelper {
position: fixed;
top: 0;
right: 0;
height: 100%;
width: 5%;
background-color: rgba(0,0,0,0.2);
overflow: hidden;
}
#scrollhelper .point {
position: absolute;
display: block;
width: 100%;
height: 10px;
margin: 0 auto;
background-color: rgba(0,0,255,0.5);
}
JavaScript
var articles;
function buildScrollHelp() {
var bodyHeight = $("body").height();
var viewHeight = window.innerHeight;
$("#scrollhelper").html("");
articles.each(function() {
var top = $(this).offset().top;
var element = document.createElement("a");
element.className = "point";
element.href = "#" + $(this).attr("id");
element.style.top = ((top / bodyHeight) * viewHeight) + "px";
$(element).on("click", function(e){
e.preventDefault();
$('html, body').animate({
scrollTop: $($(this).attr("href")).offset().top
}, 500);
});
$("#scrollhelper")[0].appendChild(element);
});
}
$(document).ready(function() {
articles = $("body").children("[id]");
$("body").append("<div id=\"scrollhelper\"></div>");
$(window).resize(function(){
buildScrollHelp();
});
buildScrollHelp();
});
Have successfully setup a menu which cycles between multiple tabs using Javascript. The issue is I'm using SiteLevel as a search for this site. I want the search box to be a part of the hide/unhide menu but the script (I've also tried the html code for the search box, but still no fix)
I've paired it down to the simplest form of this concept to ensure that it's not some other css or script that's conflicting, but it still opens to a blank box here's the code.
I've pumped it into http://jsfiddle.net/Split98/A3DVa/
Software
Hardware
Supplies
Contact
Search
<div id="nav">
<div id="software">Hello!</div>
<div id="hardware">Yes!</div>
<div id="supplies">Yeee Haw!</div>
<div id="contact">Bingo!</div>
<div id="search"><script type="text/javascript" src="http://www.sitelevel.com/javabox?crid=ze32uipb"></script></div>
</div>
CSS:
#nav div {
display: none;
background-color: red;
height: 200px;
}
jQuery:
$(function(){
var divs = $('#nav div'),
links = $('a');
links.click(function () {
$(this.hash).toggle().siblings().hide();
return false;
});
})
Thanks in advance guys!
LIVE DEMO
Simply use #nav > div in your CSS
Will target only the immediate childrens.Otherwise all DIV elements will be hidden (your search tool)
#nav > div {
display: none;
background-color: red;
height: 200px;
}
edited jQuery
$(function () {
var divs = $('#nav div'),
links = $('a');
divs.eq(0).show(); // if you need it.....
links.click(function ( e ) { // e = event
e.preventDefault(); // instead of return false;
$(this.hash).toggle().siblings().hide();
});
});
I have this HTML:
<html>
<body>
<div id="pgContent">
<div id="studyOverlay">
<div id="studyContainer">
<div id="studyTest">
<div id="studyTestContainer">
<input class="dropInput">
<ul class="inputDrop">
<!--some <li>s-->
</ul>
</div>
</div>
</div>
</div>
</div>
I want to use jQuery to position the <ul> directly underneath the <input>. This HTML shows only one input and ul, but there can be multiple with the same classes.
I tried this jQuery:
$('.dropInput').live('click', function() {
var offset = $(this).offset();
var height = $(this).height();
var width = $(this).width();
var top = offset.top + height + "px";
var right = offset.left + width + "px";
$(this).next().show();
$(this).next().css( {
'position': 'absolute',
'right': right,
'top': top
});
});
but it positions it very strangely. My guess is that there is something with the offset and there being so many divs. Is there any way to fix this?
Or if you know a CSS way that would be even better!
I seemed to be able to do it with just css here:
http://jsfiddle.net/maniator/AfJUG/
Sample css:
div {
padding: 10px;
background: blue;
}
#studyTestContainer {
background: red;
}
That seems to do it, unless I am misunderstanding the issue at hand.
UPDATE:
JS:
$('.dropInput').focus(function(){
$(this).next('.inputDrop').slideDown();
}).blur(function(){
$(this).next('.inputDrop').slideUp();
});
CSS:
div {
padding: 10px;
background: blue;
}
#studyTestContainer {
background: red;
}
.inputDrop {
display: none;
}
.dropInput {
display: block;
}
Fiddle: http://jsfiddle.net/maniator/AfJUG/6/
New Fiddle based on comments below: http://jsfiddle.net/maniator/AfJUG/7/
And another: http://jsfiddle.net/maniator/AfJUG/9/
It would look like this (JSFiddle):
.dropInput{}
.inputDrop{display:block;}
<script src="//ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js"></script>
<div id="pgContent">
<div id="studyOverlay">
<div id="studyContainer">
<div id="studyTest">
<div id="studyTestContainer">
<input class="dropInput">
<ul class="inputDrop">
<!--some <li>s-->
</ul>
</div>
</div>
</div>
</div>
</div>