We Keep Coding

Javascript - modal select option (unable to select item in modal)

Could someone kindly advise me how I go about expanding my code?
What I want to do is:
When the plots_container is clicked, this prompts up a modal with a list of charts in it
When the user clicks on a chart (eg: line plot in the modal), the content in the span stating hello hello changes to <span>line plot</span>
I would like to do something exactly like this
At the moment I have just managed to prompt up the modal when plots_container is clicked.
I would be very grateful if someone could take a look at what I've tried in the below files and provide suggestions or feedback.
index.html
<span class="modal_content">
<select class="hide seriesDetails" title="Type of Chart for this Series" id="ChartType" name="ChartType"><option selected="selected" value="17">Pie</option></select>
<div class="seriesDetails" id="plots_container">
<span>hello</span>
</div>
<div id="plotList">
<ul>
<li class="business">
<div class="image_text_content">
<div class="image_container"><img src="Content/images/plot-thumbs/1-scatter-plot.jpg" alt="scatter-plot"></div>
<div class="plot_title">scatter plot</div>
</div>
<div class="image_text_content">
<div class="image_container"><img src="Content/images/plot-thumbs/2-line-plot.jpg" alt="scatter-plot"></div>
<div class="plot_title">line plot</div>
</div>
</li>
</ul>
</div>
</span>
application.js
// modal to display types of plots
$(document).ready(function() {
$('#plots_container').click(function() {
$('#plotList').fadeToggle();
})
$(document).mouseup(function (e) {
var container = $("#plotList");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.fadeOut();
}
});
});

A quick JSFiddle: https://jsfiddle.net/hxnm7q2L/1/ to show how you can use an
.addEventListener("change", function(e) {
to trigger showing the value changing of a selected value in a modal.

If I correctly understood what you want, you could try something like this:
$('.plot_title').click(function(event){
$('#plots_container > span').html(event.target.innerText);
})
Though it would work only with html-structure that you've provided, since it has very specific css-selectors.

How to replace two class attribute in html content?

In my project, I fetch html content from DB with ajax, and these content will appear in web in div with id of timeTagDiv.
If My name is John, it should appears:
17:05:31 John translatetomaintanceGroup
letMnGrpmakeit
17:05:53 snow acceptSheet
17:06:04 snow translatetoleadGrp
leadercheckit
If my name is snow, it should appears:
17:05:31 John translatetomaintanceGroup
letMnGrpmakeit
17:05:53 snow acceptSheet
17:06:04 snow translatetoleadGrp
leadercheckit
Here is my ajax code:
var stChr="John";
var stTrnStr="translateto";
$.ajax({
......
success:function(data)
{
var $myHtml = $(data.stPrc);
$myHtml.find("label").filter(function(){
return $(this).text()===stChr;
}).parent().attr("class", "rightd");
//$myHtml.find('div:contains('+stChr+' '+stTrnStr+')').next().attr('class','rightd');
$('#timeTagDiv').html($myHtml);
}
});
Here is the content of data.stPrc from DB:
<div class="leftd">
<label>17:05:31</label>
<label>John</label>
<label> translateto</label>
<label>maintanceGroup</label>
</div>
<div class="leftd">
<div class="speech left" >letMnGrpmakeit</div>
</div>
<div class="leftd"><label>17:05:53</label>
<label>snow</label>
<label> acceptSheet</label>
</div>
<div class="leftd">
<label>17:06:04</label>
<label>snow</label>
<label> translateto</label>
<label>leadGrp</label>
</div>
<div class="leftd">
<div class="speech left" >leadercheckit</div>
</div>
When the context of label is John, the attribute class of parent div changed to rightd. Here is the code working successfully:
$myHtml.find("label").filter(function(){
return $(this).text()===stChr;
}).parent().attr("class", "rightd");
And then, the content of letMnGrpmakeit belongs to John should at the right side. So the next two divs class should be set class="rightd" and class="speech right".
In my example, before:
<div class="leftd">
<div class="speech left" >letMnGrpmakeit</div>
</div>
after replace:
<div class="rightd">
<div class="speech right" >letMnGrpmakeit</div>
</div>
I use :
$myHtml.find('div:contains('+stChr+' '+stTrnStr+')').next().attr('class','rightd');
$myHtml.find('div:contains('+stChr+' '+stTrnStr+')').next().next().attr('class','speech right');
But unfortunately, they both worked fail.
I have tried one condition:
$myHtml.find('label:contains('+stTrnStr+')').parent().next().attr('class','rightd');
It works, but it appears like:
17:05:31 John translatetomaintanceGroup
letMnGrpmakeit
17:05:53 snow acceptSheet
17:06:04 snow translatetoleadGrp
leadercheckit
"leadercheckit" should under "17:06:04 snow translatetoleadGrp", because it belongs to snow.
I have no idea about this. The key to change two div class are two conditions.
Who can help me?

I'm not sure I understand everything correctly because of wording and grammar, but I would suggest using addClass('className') and removeClass('className') instead. This way if your element has more than one class, it will only remove the desired class. By using .attr('class', 'className'), you're replacing everything. If you wish to add multiple classes, just use .addClass('class-1 class-2')

Use these:
$myHtml.find('label:contains('+stChr+')').next('label:contains('+stTrnStr+')').parent().next().attr('class','rightd');
$myHtml.find('label:contains('+stChr+')').next('label:contains('+stTrnStr+')').parent().next().children("div").eq(0).attr('class','speech right');

Find sibling with Javascript and Hammer.js

I have made a simple system which detects double taps. I want to show a heart icon when someone double taps on an image, just like on Instagram.
This is what my code looks right now:
var elements = document.getElementsByClassName('snap_img');
[].slice.call(elements).forEach(function(element) {
var hammertime = new Hammer(element),
img_src = element.getAttribute('src');
hammertime.on('doubletap', function(event) {
alert(img_src); // this is to test if doubletap works
// Some javascript to show the heart icon
});
});
This is what the HTML looks like:
<div class="snap_item">
<div class="snap_item_following_info">
<img class="snap_item_following_img" src="res/stat/img/user/profile/small/1.fw.png" alt="#JohnDoe" />
<a class="snap_item_following_name" href="#">#JohnDoe</a>
<div class="snap_too">
</div>
</div>
<img class="snap_img" src="res/stat/img/user/snap/43/2.fw.png" alt="#ErolSimsir" />
<div class="like_heart"></div>
<div class="snap_info">
<div class="snap_text">
LA is the shit...
<a class="snap_text_hashtah" href="#">#LA_city_trip</a>
</div>
<div class="snap_sub_info">
<span class="snap_time">56 minutes ago</span>
<div class="like inactive_like">
<div class="like_icon"></div>
<div class="like_no_active">5477</div>
</div>
</div>
</div>
</div>
So when the element 'snap_img' is double tapped, I need to get the element 'like_heart' which is one line below the snap_img element. How do I get that sibling element and fade it in with JQuery?

Like this
[].slice.call(elements).forEach(function(element) {
var hammertime = new Hammer(element),
img_src = element.getAttribute('src');
hammertime.on('doubletap', function(event) {
alert(img_src); // this is to test if doubletap works
$(element).next().text('♥').hide().fadeIn();
});
});
P.S. I've added that heart text, since the sibling was empty.

On the event handler, i would do $(element).parent().find('.like_heart').fadeIn(); So the code is not dependant on the element ordering.
(To clarify to selector: take the parent element which is the div.snap_item and find an element with class like-heart inside it)

jQuery toggleClass conflict

For a new webdesign I have two 50% width slider div's as a menu, and I want to add/remove/toggle the 'open' class with jQuery. On the click of one of the .menul, the #left should have added class .open, unless #right:hover and the other way around. The first time you click it it works, but the second time you click it seems to be that the toggleClass is stuck / not updated... Does anyone know how to fix this?
Here's my HTML:
<div id='home'>
<div class='slide' id='left'>
<div class='wrap'>
<div class='text'><a class='menul' href='#sounds'>Savado <span>Sounds</span></a><br/>
<div class='subtext'>
<a class='menul' href='#artist'>Performing artist</a><br/>
<a class='menul' href='#composer' id='one'>Media Composer</a><br/>
<a class='menul' href='#producer' id='two'>Band Producer</a></div>
</div>
<div class='inner'></div>
<a class='full' href='#home'></a>
</div>
<div class='logo' id='logol'>
<a href='#home'><img src='//savado.nl/new/logo.png' alt='Savado' /></a>
</div>
</div>
<div class='slide' id='right'>
<div class='wrap'>
<div class='text'><a class='menur' href='#designs'>Savado <span>Designs</span></a><br/>
<div class='subtext'>
<a class='menur' href='#management'>Content Management</a><br/>
<a class='menur' href='#portfolio' id='one'>Design Portfolio</a><br/>
<a class='menur' href='#engines' id='two'>Search Engines</a></div>
</div>
<div class='inner'></div>
<a class='full' href='#home'></a>
</div>
<div class='logo' id='logor'>
<a href='#home'><img src='//savado.nl/new/logo.png' alt='Savado' /></a>
</div>
</div>
</div>
And here's my jQuery:
$('.menul').click(function(){
$('#left').addClass('open');
$('#right').removeClass('open');
$('#right').hover(function(){$('#left').toggleClass('open')});
});
$('.menur').click(function(){
$('#right').addClass('open');
$('#left').removeClass('open');
$('#left').hover(function(){$('#right').toggleClass('open')});
});
And here's the fiddle: http://jsfiddle.net/ytexqtyg/2/
Any help would be very much appreciated!

I had another look and you will have to add another class or data attribute to differentiate between an active-and-closed menu and a active-and-open menu or this won't work.
The active "flag" is to ensure you only toggle the .open class on an active menu.
In addition you also need to keep unbinding the hover event as otherwise you are constantly re-binding the hover, causing the element to have multiple hover events bound which then will all execute and contradict each other.
Note that when unbinding the hover event using jQuery off('hover')/unbind('hover') doesn't work and you must unbind the mouseenter and mouseleave events as those are bound by jQuery when using selector.hover(...)
The new JavaScript code is as follows:
$('.menul').click(function () {
$('#left').addClass('active');
$('#left').addClass('open');
$('#right').removeClass('active');
$('#right').off('mouseenter mouseleave').hover(function(){
if($('#left').hasClass('active')){
$('#left').toggleClass('open');
}
});
});
$('.menur').click(function () {
$('#right').addClass('active');
$('#right').addClass('open');
$('#left').removeClass('active');
$('#left').off('mouseenter mouseleave').hover(function(){
if($('#right').hasClass('active')){
$('#right').toggleClass('open');
}
});
});
DEMO - Using a separate indicator for an active menu

how can I remove the subnavigation overlap?

I am trying to create a sub navigation. Right now I have two subnav. When i hover over the first item on the main menu the corresponding submenu appears. But when I hover over the second item the second sub nav appears OVER the first one. How can I write the code so that this does not happen?
url: http://arabic001.com
$(document).ready(function() {
$('#arbNavText01').mouseover(function() {
$('#subNav01').show('slow');
});
$('#subNav01').mouseleave(function() {
$('#subNav01').hide('slow');
});
$('#arbNavText02').mouseover(function() {
$('#subNav02').show('slow');
});
$('#subNav02').mouseleave(function() {
$('#subNav02').hide('slow');
});
})
I just tried the below suggestion from Scott and I am not able to show and hide the submenu on hover. Any ideas of how to solve this problem? Here are my new codes:
html
<div id="menu01" class="menu_item">
<div id="engNavText01">Alphabet</div>
<div id="arbNavText01">الأحرف</div>
<div id="subNav01" style="display:none;">
<a href="colors" class="subNav">
<span style="font-size:26px; cursor:pointer;">قراءة</span</a>
<br>reading<br><br>
</div>
</div>
<div id="menu02" class="menu_item">
<div id="engNavText02">Numbers</div>
<div id="arbNavText02">الأحرف</div>
<div id="subNav02" style="display: none; ">
<a href="colors" class="subNav">
<span style="font-size:26px; cursor:pointer;">قراءة</span</a>
<br>reading<br><br>
</div>
</div>
and the JS
$(document).ready(function() {
$('.menu_item').children().hover(
function(){
$subNav = $(this).parents('menu_item').children("div[id^='subNav'");
if ($subNav.css('display', 'none')){
$subNav.show('slow');
}
},
function(){
$(this).parents('menu_item').children("div[id^='subNav'").hide('slow');
});
})

You've created a mouseleave event, but you've only attached it to the submenu. So in order to make a menu disappear, the user will have to hover over the submenu and then move out. You could achieve what you want by hiding other submenus before opening a new one. So keeping your mouseleave events as you have them, you could modify your 2 mouseover events to this:
$('#arbNavText01').mouseover(function() {
$('#subNav02').hide('slow');
$('#subNav01').show('slow');
});
$('#arbNavText02').mouseover(function() {
$('#subNav01').hide('slow');
$('#subNav02').show('slow');
});
Edit for comment:
I was thinking about that when I went and looked at your page originally. I think if you used a slightly different structure in your html this could be done. Right now your menu divs aren't clearly structurally related to each other so maybe add a div that can contain the 3 elements associated with each menu item.
I'm going to spit ball an idea, it may not even work let alone be the best way.
<div id="menu01" class="menu_item">
<div id="engNavText01">Alphabet</div>
<div id="arbNavText01">الأحرف</div>
<div id="subNav01" style="display: none; ">
<span style="font-size:26px; cursor:pointer;">قراءة</span
<br>reading<br><br>
</div>
</div>
<div id="menu02" class="menu_item">...
Edited JS, I think now it could work
$('.menu_item').hover(
function(){
$subNav = $(this).children("div[id^='subNav']");
if ($subNav.css('display', 'none')){
$subNav.show('slow');
}
},
function(){
$(this).children("div[id^='subNav']").hide('slow');
}
);
Was trying it out with a JSFiddle, seems alright there. Might need some modification for your uses.