I have a div with overflow that acts like a list (since a real "select" is a pain in the arse when customizing and keeping it that way in all browsers).
The Problem is, the list is long and I would like that when the page loads the "selected" element of the list would be more or less in the middle of the div, something like putting selected=selected to a option in a select.
Here is a Fiddle
Thanks in advance.
If you are just trying to take the scroll to the middle, perhaps you could try this js:
document.getElementById('wraptable').scrollTop = document.getElementById('wraptable').scrollHeight / 2;
It takes the scroll of the #wraptable to the middle.
FIDDLE DEMO
You can use an anchor :
give a specific id to one of your list items (example: "anchor")
when you link to this page, add the hashtag #anchor to the url and you list will be scolled to the list item with corresponding id.
Example url : www.yourpage.com/list should become www.yourpage.com/list#anchor
This DEMO will show you.
<li id="anchor"><span>12 years</span> ... </li>
anchor link
editable fiddle
If you use jQuery you can make the "select" container to scroll to a specific element. In this case, I add a .select class to a random li just to show how it works.
Then, you can do the scroll on the #wraptable container by the number of pixels the .selected element is according to its parent.
$(function(){
var offsetSelectedElement = $(".selected").position().top;
$("#wraptable").scrollTop(offsetSelectedElement);
});
DEMO
EDIT:
To add jQuery simple add the library in the head section of your page:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
...
</html>
If you don't want to use jQuery though, you still can achieve the same result through pure javascript, but it's more code:
var offsetSelectedElement = document.getElementsByClassName("selectedItem")[0];
var wrappable = document.getElementById("wraptable");
wrappable.scrollTop = offsetSelectedElement.offsetTop;
DEMO
Related
I'm making a menu if someone clicks on one object it should filter all of them accordingly (i.e: all projects, completed projects a.s.o. I have a jQuery to take care of this like this (I added the .not() recently, before adding it this script worked):
$("#completed").click(function(){
$('.project_wrapper[data-category="completed_projects"]').not(this).hide();
});
I have figured out that I should use .not() to .hide all objects that don't have the given [data-category] or am I doing this wrong?
Edit
The HTML:
The Menu:
<ul class="project_menu>
<li id="complete">Completed Projects</li>
</ul>
The Projects:
<div class="project_wrapper" data-category="completed_projects">The projects</div>
Edit
Got it working thanks to #Nitha & #Sam Hollenbach thanks!
Edited a bit myself but here is the final jQuery code I've got:
jQuery(document).ready(function($){
// Show all
$("#all").click(function(){
$(".project_wrapper").show();
});
// Complete
$("#complete").click(function(){
$(".project_wrapper:not([data-category='completed_projects'])").hide();
$(".project_wrapper[data-category='completed_projects']").show();
});
});
Update
Instead of using .show and .hide I used .css("visibility", "collapse") & .css("visibility", "visible") show and hide seemed to bug out for me in WordPress.
The below code will hide all the project_wrapper div with data-category not equal to "completed_projects" and will show the project_wrapper div with data-category equal to "completed_projects"
$(".project_wrapper:not([data-category='completed_projects'])").hide();
$(".project_wrapper[data-category='completed_projects']").show();
I believe what you're asking is to hide all elements within .project_wrapper except for the .project_wrapper[data-category="completed_projects"] element. In that case I believe you can do this
$('.project_wrapper *').not('.project_wrapper[data-category="completed_projects"').hide();
Or if you want to remove everything in the body
$('body *').not('.project_wrapper[data-category="completed_projects"').hide();
This will remove all elements within .project_wrapper or body, subtract the one with the correct data-category, and then hide all the others.
Source
I have a dropdown menu I'm working on. I've added a hidden icon on each item. Then once the menu generates, I want to go through and find which items have sub-menus and remove the hidden class for those items.
I can't seem to be able to get this code working.
var tags = $("li > ul.sub-menu").each(function(){
$(this).parent("li").closest('i.hidden').removeClass("hidden")
})
This is the html/css
http://pastebin.com/FzTFeYMq
I'm using IE8 so right now I can't get a proper fiddle up.
If I'm understanding correctly, what you're trying to do is unhide the carets for any menu/submenu that has children. The following should accomplish what you're looking for:
var tags = $(".sub-menu").each(function(){
$(this).closest('li').find('a > span > i:first').removeClass("hidden")
})
I tossed up a quick CodePen demonstrating this here: http://codepen.io/P1xt/pen/eZMLrq
In your loop you have to find the first element with a statement like this:
$(this).find('i.hidden:first')
I need to select the element 2 up from my current element. Normally you can use the .prev() to find the previous element but I need to find the one previous to this. Whats the simplest way to find this?
var animation = $("div.services-block").prev();
I need to find the div before services-block and load that into a variable.
My structure as an example
<div class="wrapper">
<div class="services-block-item"></div>
<div class="services-block-item-match"></div>
<div class="services-block-item"></div>
<div class="services-block"></div>
</div>
Say my current element is services-block, I need to find and grab services-block-item-match. (but this class name can change)
If your "this current element" changes, some code like the following might be useful:
I used a different example: http://jsfiddle.net/swm53ran/5/ to illustrate the ability of $(this) with the .prev().prev() that may be helpful for your problem.
$(this).prev().prev().css('color', 'red');
In this fiddle illustration, a link is clicked and then jquery changes the element that is 2 spots ahead of it to have red colored text. There are four links, so if you click 4, link 2 will be red, if you click 3, link 1 would be highlighted.
Hope this helps!
var animation = $(".services-block").prev().prev();
I am trying to write a small script that will automatically reveals/hides the content of a div when the mouse gets over/out of it. What I wanna do is to have the title visible and when someone mouseover the title some more text to get visible.
The problem is that I want to show/hide only a specific inner div of any given element and not to hide the entire element. I do have lots of elements so to handwrite javascripts for every single of them is a bit silly
My HTML code goes like:
<li id="job1" onmouseover ="div2mouseover(this)" onmouseout="div2mouseout(this)">
<div style = "display:none" id="jobDescription">
<p> Blablabla</p>
</div>
<li>
My JavaScript code goes like:
<script type="text/javascript">
function div2mouseover(obj)
{
//obj.style.display = "none"; //I can reach that
obj.getElementById("jobDescription").style.display = "initial"; //I can't reach that
}
</script>
So with the obj.style.display I can edit the visibility of any given element, but I can't reach its inner div that I am trying to reach.
I have managed to do that for a single element like this:
document.getElementById("jobDescription").style.display = "initial";
But with this way I have to write a script for all my job elements, which are a lot.
Any suggestions??
You can reference elements by their position too.
For example if the div you want to display is always the first div inside the "hover" li you can do
function div2mouseover(obj) {
var div = obj.getElementsByTagName("div")[0];
div.style.display = "initial";
}
You don't need any IDs in the divs if you do it like this.
The comment from the friend nnnnnn solved my case.. (maybe the other answers might work as well)
ID is supposed to be unique. Use a class instead, and use obj.querySelector(".classNameHere") – nnnnnn 12 mins ago
Thank you guys!
My navigation menu on header looks like this:
<ul id="nav">
<li id="home">
<a class="mainmenu" href="#">Link1</a>
</li>
<li>
<a class="mainmenu" href="#">Link2</a>
</li>
</ul>
and the same markup is used for the footer section and it's not working.
I have also a file called jscript.js which contains all the javascript for the website,
and I found this variable:
var navTarget = "ul#nav li a" //menu link to target
Also, if I remove for example the markup in the header sections the footer will work.
I've tried also to use .nav instead of #nav and I have the same problem.
The navigation menu is controlled by javascript, I don't post the code here because it's huge, for better understanding of how the navigation menu works look here
I've found this in the javascript:
//SET MENU ITEM IDs
$(navTarget).each(function(i){
i++
this.id = this.id +"_" +i ;
});
//MENU CLICK FUNCTION
$(navTarget).click(function() {
//ensure link isnt clickable when active
if ($(this).hasClass('active')) return false;
//get id of clicked item
activeNavItem = $(this).attr('id');
//call the page switch function
switchContent();
});
//CONTENT SWTICH FUNCTION
var switchContent = function (){
//set previous and next link & page ids
var PrevLink = $(navTarget+'.active')
$(PrevLink).removeClass('active');
var PrevId = $(PrevLink).attr('id');
//alert(PrevId)
var NextLink = $('#'+activeNavItem).addClass('active');
var NextId = activeNavItem
//alert(NextId);
From the looks of it, the JS code is using some CSS selector (like jquery's $ or dojo's dojo.query) that pulls in the DOM element target based on the value of navTarget, and then does something with it: turns it into a menu.
But its only doing it once.
You need to look at the JS and see where navTarget is used. Then it should be fairly easy to make it do the menu creation on all the results of $(navTarget) instead of just the first hit.
Also, you should only have on instance of an ID in your dom.
You can change this to a class instead:
var navTarget = "ul.nav li a"
And in the markup:
<div class='nav'>
But you will still have to look at the JS and make sure it functions against a set of targets returned by the CSS selector. That code is probably expecting just a single result and using just it: results[0].
You can only have one element of a given id on the page. So based on your description, it sounds like you have 2.
I don't know exactly how this script works, but you can try using classes instead.
<ul class="nav">
var navTarget = "ul.nav li a";
You would have to change your HTML and the JS navTarget selector string.
But there is also a good chance that your script may not support creating multiple menus at all. And if thats the case, you may need to fix that script or find a better one.
If the code for the footer really is identical to the header, that's the problem. An id should only be used for a single element in a page, and jQuery's selectors will only return the first. Meaning code like "ul#nav li a" only works on the header.
Easiest solution is to change the id's to classes, e.g.:
<ul class="nav">
... and change your jQuery to match that, e.g.:
var navTarget = "ul.nav li a";
Update: And (ignoring that this may end up turning into three duplicate posts), that fix is probably not enough at all, since other parts of the script may only work with a single menu.