I have a system of jQuery dropdown menus, but have a strange problem where the text cannot be selected (e.g. to copy/paste) after the menu is used.
Check out the Fiddle here, and try selecting the sample text before using the menu. Then hover over a menu item, and the text can no longer be selected.
I need the text to still be selectable after the user opens/closes the menus. Take a look:
HTML Structure:
<div class="oe_wrapper">
<div id="oe_overlay" class="oe_overlay"></div>
<ul id="oe_menu" class="oe_menu">
<li>Home
<div class="hover-div">Content 1</div>
</li>
<li>Projects
<div class="hover-div">Content 2</div>
</li>
<li>No Hover
<div class="hover-div not-shown">This should not appear and no other menu divs or the dark overlay should be shown.</div>
</li>
<li>Events
<div class="hover-div">Content 4</div>
</li>
<li>Stores
<div class="hover-div">Content 5</div>
</li>
</ul>
JS:
$(function () {
var $oe_menu = $('#oe_menu');
var $oe_menu_items = $oe_menu.children('li');
var $oe_overlay = $('#oe_overlay');
$oe_menu_items.bind('mouseenter', function () {
var $this = $(this);
$this.addClass('slided selected');
if ($this.children('.hover-div').hasClass('not-shown')) {
$oe_menu_items.not('.slided').children('.hover-div').hide();
$this.removeClass('slided');
} else {
$this.children('.hover-div').css('z-index', '9999').stop(true, true).slideDown(200, function () {
$oe_menu_items.not('.slided').children('.hover-div').hide();
$this.removeClass('slided');
});
}
}).bind('mouseleave', function () {
var $this = $(this);
$this.removeClass('selected').children('.hover-div').css('z-index', '1');
});
$oe_menu.bind('mouseenter', function () {
var $this = $(this);
$oe_overlay.stop(true, true).fadeTo(200, 0.6);
$this.addClass('hovered');
}).bind('mouseleave', function () {
var $this = $(this);
$this.removeClass('hovered');
$oe_overlay.stop(true, true).fadeTo(200, 0);
$oe_menu_items.children('.hover-div').hide();
})
});
Thanks in advance for your help. Once again, this is the Fiddle.
The problem is your div oe_overlay is starting out display:none (good), then fading in on mouse over, then fading out on mouse out, but it's not being set to display:none again so it's effectively masking all other input on the page.
All you need is to hide the div after you've faded it out:
$oe_overlay.stop(true, true).fadeTo(200, 0, function() {
$(this).hide();
});
See updated fiddle
Related
I have got 2 rows of html.
One row contains plain html and another row contains ul li lists.
First case:
On page load I want to change the text color of row one depending on which li is active.
Second Case
On click any li from second row, I would like to change the color of first row html depending on what data I have clicked in second row.
My code
First row
<div class="horizontal-link">
<div class="test">
<h4 data-id="1">Text 1</h4> <!--So on page load I would like to change the color to red as related with row 2 ul li) -->
</div>
<div class="test">
<h4 data-id="2">Text 2</h4>
</div>
</div>
Second Row
<ul>
<li class="tab active" data-id="1">Text 1</li>
<li class="tab" data-id="2">Text 2</li>
</ul>
I have tried and created a jsfiddle as demo:
Any help is highly appreciated. Thanks in advance.
You can use .filter() or attribute-selectors to check the data-id like this
jQuery
$(function(){
//Adds class on load depending on which is active
$('.test h4[data-id="'+$('ul li.active').data('id')+'"]').addClass('active');
//Adds class on click
$('li.tab').on('click',function(){
$('.test h4').removeClass('active');
$that = $(this);
$('.test h4').filter(function(){
return $(this).data('id')==$that.data('id')
}).addClass('active');
//removes class on clickable li and adds to clicked
$(this).addClass('active').siblings().removeClass('active');
});
});
CSS
.test h4.active {
color:red;
}
You need to change the css so it checked the h4 if has the class active
DEMO
You can either change text color of div or h4 by adding active class.
For div with active class use below jQuery
$(document).ready(function ($) {
var id = $('ul').find('.active').attr('data-id');
$('.horizontal-link h4[data-id="'+id+'"]').closest('.test').addClass('active');
$("li.tab").click(function () {
$('.active').removeClass('active');
var id = $(this).attr('data-id');
$('.horizontal-link h4[data-id="'+id+'"]').closest('.test').addClass('active');
});
});
DEMO
For h4, you need to change CSS like below
CSS :
.test h4.active {
color:red;
}
jQuery :
$(document).ready(function ($) {
var id = $('ul').find('.active').attr('data-id');
$('.horizontal-link h4[data-id="'+id+'"]').addClass('active');
$("li.tab").click(function () {
$('.horizontal-link h4').removeClass('active');
var id = $(this).attr('data-id');
$('.horizontal-link h4[data-id="'+id+'"]').addClass('active');
});
});
DEMO
Look at the JS fiddle here. I hope this will help you.,
Updated jQuery:
$(document).ready(function ($) {
var id = $('ul').find('.active').attr('data-id');
$('.horizontal-link h4[data-id='+id+']').addClass('active');
$("li.tab").click(function () {
$('.horizontal-link h4').removeClass('active');
var id = $(this).attr('data-id');
$('.horizontal-link h4[data-id='+id+']').addClass('active');
});
});
JS Fiddle:
http://jsfiddle.net/v1v1tqzs/34/
There is a change in your CSS :-
.test .active {
color:red;
}
you wrote it as .test.active . There should be a gap . That's why on page load the color:red was not getting implemented .
YOUR UPDATED FIDDLE:
$(document).ready(function () {
var id = $('ul').find('.active').attr('data-id');
$('.horizontal-link h4').each(function () {
if ($(this).attr('data-id') == id) {
$(this).addClass('active');
return;
}
});
$("li.tab").click(function () {
var id = $(this).attr('data-id');
$('.horizontal-link h4').each(function () {
if ($(this).hasClass('active')) {
$(this).removeClass('active');
}
});
$('.horizontal-link h4').each(function () {
if ($(this).attr('data-id') == id) {
$(this).addClass('active');
return;
}
});
});
});
Try this , code can be optimized
HTML:
<div class="horizontal-link">
<div class="test">
<h4 class = "1" data-id="1">Text 1</h4>
</div>
<div class="test">
<h4 class = "2" data-id="2">Text 2</h4>
</div>
</div>
<ul>
<li class="tab active" data-id="1">Text 1</li>
<li class="tab" data-id="2">Text 2</li>
</ul>
CSS :
.test.active {
color:red;
}
.tab {
cursor:pointer;
}
ul li.tab {
list-style:none;
display:inline-block;
width:50px
}
.active {
color:red;
}
JS:
$(document).ready(function () {
var id = $('ul').find('.active').attr('data-id');
if ($('.horizontal-link h4').attr('data-id') == id) {
$('.'+id).addClass('active');
}
});
$(".tab").click(function () {
$(".tab").removeClass('active');
$(this).addClass('active');
$('.horizontal-link h4').removeClass('active');
var id = $(this).attr('data-id');
$('.'+id).addClass('active');
});
I have a drop down menu where the user selects a location and it scrolls to the div to reveal the address (10 different locations).
This works well in a desktop browser. However on the ipad, iphone and nexus it doesnt work because of touch screen.
This is my code:-
<html>
<div class="location">
<ul>
<li>Select an Office
<ul class="officeselect">
<li><a data-emailaddress="" data-address='<span class="address">99 Walnut Tree Close</span>
<span class="address">Guildford</span>
<span class="address">Surrey</span>
<span class="address">GU1 4UQ</span><br>
<span class="address">T: +44 1483 881500</span>
<span class="address">info#petroplan.com</span>' href="">UK Head</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="span4 alpha">
<div class="addresstitle">
<h3>Address</h3>
</div>
<div class="address">
</div>
</div>
</html>
<script>
// Scroll down to map and address function
$(".location ul li ul a").click(updateAddressDisplay);
function updateAddressDisplay(src) {
$('.office-sel-cont .chooser').text($(this).text());
var target = $(".address");
var source;
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
if (src === null)
source = $(".black-sectors li a.adr-src:eq(0)");
else
source = $(this);
target.fadeOut();
target.html(source.data("address") + source.data("emailaddress"));
target.fadeIn();
var chooser = $(this).parent().parent().parent().find('.chooser');
if (chooser.hasClass('open')) {
chooser.removeClass('open');
chooser.next($('.black-sectors')).animate({
'top': '60px',
'opacity': 0
}, 600, 'easeOutQuint', function() {
chooser.next($('.black-sectors')).toggle();
});
return false;
} else {
}
return false;
}
</script>
And I used this below from this website, but it's still dodgy.
<script>
$('.location ul li ul a').on('click touchend', function(e) {
e.preventDefault();
var el = $(this);
var link = el.attr('href');
window.location = link;
});
</script>
Thanks for your help.
this is the fiddle:-http://jsfiddle.net/ScVs9/
For your drop down list to work on a touch screen device you need to trigger the drop-down using a javascript click event rather than the css hover. Simple way would be create a class, called something like .active and then use a function like this:
$('.location a').on('click', function(){
$('.officeselect').toggleClass('active')
});
The active class would simply have visibility set to visible:
ul.officeselect.active {visibility:visible;}
The user should then be able to select the correct link and display the address as per usual.
I hope this helps
I know this is going to be an easy thing to do for someone with javascript experience, but I'm drawing a blank.
I have a list of items:
<div id="left-side">
<ul>
<li><div>Item 1</div></li>
<li><div>Item 2</div></li>
</ul>
</div>
<input id="addElement" type="button" value="->"/>
<div id="right-side">
</div>
I would like to highlight(change the background color) the selected list item on the left and then on a click of the button, move the selected item to the right div, and finally changing the background color back.
I've seen this many, many times online. But can't for the life of me, come up with how to do it.
Something like this (jquery) should do the trick:
// make the items selectable by toogling an 'active' class
$('#left-side li').click(function() {
$(this).toggleClass('active');
});
// on click of the move button
$('#addElement').click(function() {
// get the items to move
var $items = $('#left-side li.active');
// remove their active state
$items.removeClass('active');
// append them to the right side list
$('#right-side ul').append($items);
});
As you can see the code is indeed pretty straigh forward.
I also set up a small example to demonstrate: http://jsfiddle.net/NbcS9/
edit:
If you only want to be able to only select a single item on the left, you could do something like this in stead:
// make the items selectable by toogling an 'active' class
$('#left-side li').click(function () {
// remove active class from all other items
$('#left-side li').not($(this)).removeClass('active');
// toggle the active class on the clicked item
$(this).toggleClass('active');
});
And the updated fiddle:
http://jsfiddle.net/NbcS9/1/
I'd start by adding an empty <ul></ul> to your right side div, then use this:
$('#left-side li').click(function () {
$(this).toggleClass('selected');
});
$('#addElement').click(function () {
$('#left-side li.selected').appendTo($('#right-side ul'));
});
jsFiddle example
You may try this
$(function(){
$('#left-side ul li').on('click', function(){
$(this).toggleClass('selected');
});
$('#addElement').on('click', function(){
$('#left-side ul li.selected').appendTo($('#right-side ul'));
});
});
DEMO.
Using pure JavaScript would be tricky to do this, but using JQuery you can do this sort of easily. Add click events to the two divs which would append the selected text of the other to itself. to get the selected data add a function like this:
function getSelectionText() {
var text = "";
if (window.getSelection) {
text = window.getSelection().toString();
} else if (document.selection && document.selection.type != "Control") {
text = document.selection.createRange().text;
}
return text;
}
Also, I would look into Jquery Draggable(). sounds like something that could relate to your desired end result. http://jqueryui.com/draggable/
css:
.highlighted { background: yellow; }
html:
<div id="left-side">
<ul>
<li><div>Item 1</div></li>
<li><div>Item 2</div></li>
</ul>
</div>
<input id="addElement" type="button" value="->"/>
<div id="right-side">
<ul></ul>
</div>
JS:
$('#left-side').find('li').on('click', function(event) {
$(this)
.siblings().removeClass('highlighted')
.end()
.addClass('highlighted');
});
$('#addElement').on('click', function(event) {
event.preventDefault();
$('#left-side').find('li.highlighted').appendTo('#right-side ul'));
});
<li><b>Arbeiten</b></li>
This is the link. When i click this it change the id of the div(#section17) from display none to block.
<li><b>Feiern</b></li>
Now if i click on a other link(#section15) it should change the display:block from #section17 to display:none again and the link(#section15) to display block
The page doesnt reload just the url change a little bit.
Can anyone help me?
<script type="text/javascript">
$("a").click(function () {
var addressValue = $(this).attr("href");
$(addressValue).css("display","block");
});
</script>;
DEMO: http://jsfiddle.net/gvee/qba7e/
HTML
<ul>
<li><b>section 17</b>
</li>
<li><b>section 18</b>
</li>
<li><b>section 19</b>
</li>
</ul>
<div id="sections-container">
<div id="section17">section 17</div>
<div id="section18">section 18</div>
<div id="section19">section 19</div>
</div>
JQuery
$('a').click(function (e) {
// Prevent jumping to anchor
e.preventDefault();
// Hide all other sections
$('#sections-container > div').css('display', 'none');
// Show only one we want
var addressValue = $(this).attr('href');
$(addressValue).css('display', 'block');
});
You have to cancel the link's default behaviour:
$("a").click(function (event) {
event.preventDefault();
var addressValue = $(this).attr("href");
$(addressValue).css("display","block");
});
your code should be like this
<script type="text/javascript">
function HideShow(ctrl) {
var addressValue = $(ctrl).attr("href");
$(addressValue).css("display", "block");
}
</script>
<li><b>Arbeiten</b></li>
<li><b>Feiern</b></li>
If you give all sections a class of sectionClass then hide all elements with this class and show the relevant one on click you should be in business.
$("a").click(function (e) {
e.preventDefault();
var addressValue = $(this).attr("href");
$(".sectionClass").hide();
$(addressValue).show();
});
I have two lists: the first one is displayed on the left and the second on the right.
I want that if I click on an element in the left, he is removed and he is prepended to the right list (and the opposite action)
This is my html:
<div class="cont">
<div id="groupL" class="innDiv">
<div id="1" class="aaaL">Value 1</div>
<div id="2" class="aaaL">Value 2</div>
</div>
<div id="groupR" class="innDiv">
<div id="4" class="aaaR">Value 4</div>
<div id="3" class="aaaR">Value 3</div>
</div>
</div>
This is the javascript source.
var clickLtoR = function(n){
_this = $('#'+n);
$('#groupR').prepend('<div class="aaaR" id="'+n+'">'+_this.html()+'</div>');
_this.remove();
}
var clickRtoL = function(n){
_this = $('#'+n);
$('#groupL').prepend('<div class="aaaL" id="'+n+'">'+_this.html()+'</div>');
_this.remove();
}
$('.aaaL').click(function(){
clickLtoR($(this).attr("id"));
});
$('.aaaR').click(function (){
clickRtoL($(this).attr("id"));
});
If I click for example on "Value1", I need to move this div to the right.
It's works..but if I click again on the same element, for example following the previous example on the "value 1", this have not any associated click event and does not come back on the left list.
How to do to solve this problem and bind the click on the "new element"?
Here, the working code on JSFiddle http://jsfiddle.net/uw446/1/
http://jsfiddle.net/uw446/2/
$("div.el").on("click", function() {
var $this = $(this);
if ($this.hasClass("aaaL")) {
$this.removeClass("aaaL").addClass("aaaR").prependTo("#groupR");
} else {
$this.removeClass("aaaR").addClass("aaaL").prependTo("#groupL");
}
});
You are indeed overcomplicating this. The above should work flawlessly.
try this..
$('div.cont div div').click(function(){
var $value = $(this);
var $parent = $value.parent();
if($parent.attr('id') == 'groupL'){
$parent.next('#groupR').prepend($value);
}else if($parent.attr('id') == 'groupR'){
$parent.prev('#groupL').prepend($value);
}
})
http://jsfiddle.net/uw446/4/