Toggle menu by changing styles in Javascript - javascript

I am trying to add a toggle function to a menu.
I'm trying to do this by changing the style of the the menu in Javascript like below.
It seems to work when I click to open the menu but it doesn't work for closing the menu.
let toogleNavStatus = false;
let toogleNav = function(){
let getSidebar = document.querySelector(".nav-links");
if (toogleNavStatus === false) {
getSidebar.style.visibility = "visible";
toogleNavStatus === true;
}
else if (toogleNavStatus === true) {
getSidebar.style.visibility = "hidden";
toogleNavStatus === false;
}
}
Can someone help me figure out what the problem is with this code?
Below is the HTML
<nav class="nav-bar">
<div class="nav-center">
<div class="nav-header">
<a href="index.html" class="nav-logo">
<img src="./assets/logo.svg" alt="logo" />
</a>
<button type="button" class="btn nav-btn">
<i class="fas fa-bars" onclick="toogleNav()"></i>
</button>
</div>
<div class="nav-links">
Home
All
Contacts
<div class="nav-link nav-social">
<a href="https://www.instagram.com/">
<i class="fab fa-instagram"></i
></a>
</div>
</div>
</div>
</nav>
Thank you

You are not assigning a new state for toogleNavStatus in your JS.
It should be
toogleNavStatus = true;
toogleNavStatus = false;
not
toogleNavStatus === true;
toogleNavStatus === false;
= assigns the value, == and === compares them.

Related

Updating window.location with new images based off JS if statements

I’m trying to refactor my already working application. https://besthaircolor.herokuapp.com/
App: When user selects eyeColor and skinTone, a new html results page opens (window.location) and presents them their 3 best hair colors.
Goal: Currently, I have numerous html pages based on every possible result, ex. eyeColor: “Brown” skinTone :“Fair”, Submit, then window.location opens up a separate page of 3 images of best unique hair colors. I’m trying to find a way where there is just ONE html results (window.location)page and the only thing that updates from the dropdown selections are the photos (results).
I’m having a hard time researching what I’m trying to do because adding an img src to window.location wouldn't technically work if it's not clear where the img's will be on the results page correct? I apologize if it’s confusing, I’m still a beginner. If anyone can point me in the right direction or suggest any tutorials for what I’m trying to accomplish that would be helpful.
Unless, my code is perfectly fine the way it currently is but from my studies duplicate/redundant code is never good. If anyone can kindly let me know.
My index.js:
document.onreadystatechange = function () {
if (document.readyState === "interactive") {
initApplication();
}
}
var eyeColor = null;
function selectMenu1(value){
eyeColor = value;
}
var skinTone = null;
function selectMenu2(value){
skinTone = value;
}
function validate() {
if (eyeColor && skinTone){
// alert(`You selected ${eyeColor} eye colour and ${skinTone} skin tone.`);
if (eyeColor=="brown" && skinTone=="fair"){
window.location = "brown/brown_fair.html";
} else if (eyeColor=="brown" && skinTone=="light"){
window.location = "brown/brown_light.html";
} else if (eyeColor=="brown" && skinTone=="medium"){
window.location = "brown/brown_medium.html";
} else if (eyeColor=="brown" && skinTone=="bronze"){
window.location = "brown/brown_bronze.html";
} else if (eyeColor=="brown" && skinTone=="tan"){
window.location = "brown/brown_tan.html";
} else if (eyeColor=="brown" && skinTone=="rich"){
window.location = "brown/brown_rich.html";
}
if (eyeColor=="blue" && skinTone=="fair"){
window.location = "blue/blue_fair.html";
} else if (eyeColor =="blue" && skinTone=="light"){
window.location = "blue/blue_light.html";
} else if (eyeColor =="blue" && skinTone=="medium"){
window.location = "blue/blue_medium.html";
} else if (eyeColor =="blue" && skinTone=="bronze"){
window.location = "blue/blue_bronze.html";
} else if (eyeColor=="blue" && skinTone=="tan"){
window.location = "blue/blue_tan.html";
} else if (eyeColor=="blue" && skinTone=="rich"){
window.location = "blue/blue_rich.html";
}
if (eyeColor=="green" && skinTone=="fair"){
window.location = "green/green_fair.html";
} else if (eyeColor == "green" && skinTone=="light"){
window.location= "green/green_light.html";
} else if (eyeColor== "green" && skinTone=="medium"){
window.location="green/green_medium.html";
} else if (eyeColor=="green" && skinTone=="bronze"){
window.location="green/green_bronze.html";
} else if (eyeColor=="green" && skinTone=="tan"){
window.location="green/green_tan.html";
} else if (eyeColor=="green" && skinTone=="rich"){
window.location="green/green_rich.html";
}
if (eyeColor=="hazel" && skinTone=="fair"){
window.location = "hazel/hazel_fair.html";
} else if (eyeColor=="hazel" && skinTone=="light"){
window.location="hazel/hazel_light.html";
} else if (eyeColor=="hazel" && skinTone=="medium"){
window.location="hazel/hazel_medium.html";
} else if (eyeColor=="hazel" && skinTone=="bronze"){
window.location="hazel/hazel_bronze.html";
} else if (eyeColor=="hazel" && skinTone=="tan"){
window.location="hazel/hazel_tan.html";
} else if (eyeColor=="hazel" && skinTone=="rich"){
window.location="hazel/hazel_rich.html";
}
}
//Error message if user does not select an item from the dropdown menus
if (!eyeColor){
document.getElementById("error").innerHTML = "<span class='error'>Please choose an eye color</span>";
}
else if (!skinTone){
document.getElementById("error").innerHTML = "<span class='error'>Please choose a skin tone</span>";
}
}
function initApplication(){
//setup dropdown menu selection events
Array.from(document.querySelectorAll(".dropdown-menu")).forEach((menu,idx)=>{
const menuCallbackName = menu.attributes.onchange.value;
const fetchedCallback = window[menuCallbackName] || null;
if (fetchedCallback){
Array.from(menu.children).forEach((child)=>{
const callbackValue = child.attributes.data ? child.attributes.data.value : null;
if (callbackValue) child.onclick = () => fetchedCallback(callbackValue);
});
} else console.error(`No callback function named ${menuCallbackName} for menu ${idx}`);
});
}
my index.html:
<title>Best Hair Color</title>
<!--Intro-->
<div class="container text-center">
<div class="jumbotron">
<h1 class="display-4" style="font-size: 2.5rem;"><i class="fas fa-user-alt"></i> Your Best Hair Color Is . . .</h1>
<hr class="my-4">
<p class="info">"The most flattering hair color comes when you have "THE PERFECT TRIO". A perfect trio is when your hair color matches your skin tone and eye color. Your perfect hair color will make your eyes POP. Your eyes will appear brighter and bigger. It will also go well with your skin tone. The right hair color will give your skin color, vibrance, and softness." - Salone Envy Chicago</p>
</div>
<!--Drop down Item 1 -->
<h3 class="display-4" style="font-size: 1.5rem;">What is your eye color</h3>
<div class="dropdown">
<div class="input-group justify-content-center">
<div class="input-group-btn">
<button class="btn btn-info btn-md dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="background-color: #588c7e;">
Eye Color
</button>
<div class="dropdown-menu" onchange="selectMenu1" aria-labelledby="dropdownMenuButton" id="eyeColor">
<a class="dropdown-item" data="brown" ><img src="img/brown_eye.jpg" class="rounded-circle"> Brown</a>
<a class="dropdown-item" data="blue" ><img src="img/blue_eye.jpg" class="rounded-circle" > Blue</a>
<a class="dropdown-item" data="green" ><img src="img/green_eye.jpg" class="rounded-circle" > Green</a>
<a class="dropdown-item" data="hazel" ><img src="img/hazel_eye.jpg" class="rounded-circle" > Hazel</a>
</div>
</div>
</div>
</div>
<!--Drop down Item 2-->
<h3 class="display-4" style="font-size: 1.5rem;"> What is your skin tone</h3>
<div id="menu2" class="dropdown">
<div class="input-group justify-content-center">
<div class="input-group-btn">
<button class="btn btn-info btn-md dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="background-color: #588c7e;">
Skin Tone
</button>
<div class="dropdown-menu" onchange="selectMenu2" aria-labelledby="dropdownMenuButton" id="skinTone">
<a class="dropdown-item" data="fair"><img src="img/fair.jpg" class="rounded-circle" > Fair</a>
<a class="dropdown-item" data="light"><img src="img/light.jpg" class="rounded-circle" > Light</a>
<a class="dropdown-item" data="medium"><img src="img/medium.jpg" class="rounded-circle" > Medium</a>
<a class="dropdown-item" data="bronze"><img src="img/bronze_dark.jpg" class="rounded-circle" > Bronze</a>
<a class="dropdown-item" data="tan"><img src="img/tan.jpg" class="rounded-circle" > Tan</a>
<a class="dropdown-item" data="rich"><img src="img/dark.jpg" class="rounded-circle" > Rich</a>
</div>
<div class="error" id="error"></div>
</div>
</div>
</div>
<br>
<!--Result Button-->
<label id="error"></label>
<button type="button" class="btn btn-info btn-lg active" title ="Submit" style="background-color: #3e4444;" onclick="validate()"><i class="fas fa-arrow-circle-right fa-lg"></i></button>
<script>
$(".dropdown-menu a ").click(function(){
$(this).parents(".input-group-btn").find('.btn').text($(this).text());
});
</script>
</body>
</html>
There are a lot of ways to improve your code, but if you are specifically looking to clean up your redundancies, you can clean up all your selection functions with something like this:
function getColor (eyeColor, skinTone) {
window.location = eyeColor + "/" + eyeColor + "_" + skinTone + ".html";
}
I can suggest you with two solutions,
With the same set of pages,rather than redirecting the whole page make use you of Iframe to load whatever page you want inside the Iframe
The way I do:
Use image tag and feed it with whatever image source you want as a byte array.
So basically what I was suggesting was something like:
<!--index.html-->
<!--after result-button-->
<div id="brown_fair" style="display:hidden">
<!-- here goes your brown/brown_fair.html content, or what you want of it-->
</div>
<!--one more div for each possible result-->
and in your javascript:
function validate() {
if (eyeColor && skinTone){
// alert(`You selected ${eyeColor} eye colour and ${skinTone} skin tone.`);
if (eyeColor=="brown" && skinTone=="fair") {
//toggle element visibility
document.getElementById("brown_fair").style.display(desiredDisplay);
}
//...
}
}
If your code is already working, you can replace the redundant code this way:
window.location = `{eyeColor}/{eyeColor}_{skinTone}.html`;

How display selected item from Bootstrap 4 drop-down item menu

I'm trying to display what the user selects once they click on an item from the Boostrap 4 drop down menu.
Ex. "What is your eye color" User selects : Blue - Blue is displayed after click.
Ex. "What is your skin tone" User selects: Fair- Fair is displayed after click.
I have done research and jQuery seems to be the best bet however all of the solutions are for older bootstrap versions. I'm using Boostrap 4 and there are no li tags in the bootstrap 4 code, it's all a class tags so I'm not sure how to fit that into the jQuery option below. Also, I have (2) dropdown menus - please see pic. I'm not sure if this makes it more tricky. Any assistance or direction would be great.
jQuery:
$(document).ready (function(){
$('#selectmenu1 a').click(function){
}
HTML:
<!--Drop down Item 1 -->
<h3 class="display-4" style="font-size: 1.5rem;">What is your eye color</h3>
<div class="dropdown">
<button class="btn btn-info btn-md dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="background-color: #588c7e;">
Eye Color
</button>
<div class="dropdown-menu" onchange="selectMenu1" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#" data="brown"><img src="img/brown_eye.jpg" class="rounded-circle"> Brown</a>
<a class="dropdown-item" href="#" data="blue"><img src="img/blue_eye.jpg" class="rounded-circle" > Blue</a>
<a class="dropdown-item" href="#" data="green"><img src="img/green_eye.jpg" class="rounded-circle" > Green</a>
<a class="dropdown-item" href="#" data="hazel"><img src="img/hazel_eye.jpg" class="rounded-circle" > Hazel</a>
</div>
</div>
<!--Drop down Item 2-->
<h3 class="display-4" style="font-size: 1.5rem;"> What is your skin tone</h3>
<div id="menu2" class="dropdown">
<button class="btn btn-info btn-md dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="background-color: #588c7e;">
Skin Tone
</button>
<div class="dropdown-menu" onchange="selectMenu2" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#" data="fair"><img src="img/fair.jpg" class="rounded-circle" > Fair (porcelain)</a>
<a class="dropdown-item" href="#" data="light"><img src="img/light.jpg" class="rounded-circle" > Light (fair to light)</a>
<a class="dropdown-item" href="#" data="medium"><img src="img/medium.jpg" class="rounded-circle" > Medium (light to medium)</a>
<a class="dropdown-item" href="#" data="bronze"><img src="img/bronze_dark.jpg" class="rounded-circle" > Bronze dark (deep tan)</a>
<a class="dropdown-item" href="#" data="tan"><img src="img/tan.jpg" class="rounded-circle" > Tan (warm to medium)</a>
<a class="dropdown-item" href="#" data="rich"><img src="img/dark.jpg" class="rounded-circle" > Rich (deep)</a>
</div>
</div>
<script>
document.onreadystatechange = function () {
if (document.readyState === "interactive") {
initApplication();
}
}
var eyeColor = null;
function selectMenu1(value){
eyeColor = value;
}
var skinTone = null;
function selectMenu2(value){
skinTone = value;
}
function validate() {
if (eyeColor && skinTone){
// alert(`You selected ${eyeColor} eye colour and ${skinTone} skin tone.`);
if (eyeColor=="brown" && skinTone=="fair"){
window.location = "brown/brown_fair.html";
} else if (eyeColor=="brown" && skinTone=="light"){
window.location = "brown/brown_light.html";
} else if (eyeColor=="brown" && skinTone=="medium"){
window.location = "brown/brown_medium.html";
} else if (eyeColor=="brown" && skinTone=="bronze"){
window.location = "brown/brown_bronze.html";
} else if (eyeColor=="brown" && skinTone=="tan"){
window.location = "brown/brown_tan.html";
} else if (eyeColor=="brown" && skinTone=="rich"){
window.location = "brown/brown_rich.html";
}
if (eyeColor=="blue" && skinTone=="fair"){
window.location = "blue/blue_fair.html";
} else if (eyeColor =="blue" && skinTone=="light"){
window.location = "blue/blue_light.html";
} else if (eyeColor =="blue" && skinTone=="medium"){
window.location = "blue/blue_medium.html";
} else if (eyeColor =="blue" && skinTone=="bronze"){
window.location = "blue/blue_bronze.html";
} else if (eyeColor=="blue" && skinTone=="tan"){
window.location = "blue/blue_tan.html";
} else if (eyeColor=="blue" && skinTone=="rich"){
window.location = "blue/blue_rich.html";
}
if (eyeColor=="green" && skinTone=="fair"){
window.location = "green/green_fair.html";
} else if (eyeColor == "green" && skinTone=="light"){
window.location= "green/green_light.html";
} else if (eyeColor== "green" && skinTone=="medium"){
window.location="green/green_medium.html";
} else if (eyeColor=="green" && skinTone=="bronze"){
window.location="green/green_bronze.html";
} else if (eyeColor=="green" && skinTone=="tan"){
window.location="green/green_tan.html";
} else if (eyeColor=="green" && skinTone=="rich"){
window.location="green/green_rich.html";
}
if (eyeColor=="hazel" && skinTone=="fair"){
window.location = "hazel/hazel_fair.html";
} else if (eyeColor=="hazel" && skinTone=="light"){
window.location="hazel/hazel_light.html";
} else if (eyeColor=="hazel" && skinTone=="medium"){
window.location="hazel/hazel_medium.html";
} else if (eyeColor=="hazel" && skinTone=="bronze"){
window.location="hazel/hazel_bronze.html";
} else if (eyeColor=="hazel" && skinTone=="tan"){
window.location="hazel/hazel_tan.html";
} else if (eyeColor=="hazel" && skinTone=="rich"){
window.location="hazel/hazel_rich.html";
}
}
else if (!eyeColor){
alert("Please pick an eye colour");
} else if (!skinTone){
alert("Please pick a skin tone");
}
}
function initApplication(){
//setup dropdown menu selection events
Array.from(document.querySelectorAll(".dropdown-menu")).forEach((menu,idx)=>{
const menuCallbackName = menu.attributes.onchange.value;
const fetchedCallback = window[menuCallbackName] || null;
if (fetchedCallback){
Array.from(menu.children).forEach((child)=>{
const callbackValue = child.attributes.data ? child.attributes.data.value : null;
if (callbackValue) child.onclick = () => fetchedCallback(callbackValue);
});
} else console.error(`No callback function named ${menuCallbackName} for menu ${idx}`);
});
}
</script>
And if even easier
<script>
$(".dropdown-menu a ").click(function () {
let x = $(this).text();
alert(x);
});
</script>
Works with this HTML below. No input-group needed and jQuery short enough.
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" data-toggle="modal" href="#myModal">Navbar</a>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button"
id="dropdownMenuButton" style="width:4rem"
data-toggle="dropdown">en
</button>
<div class="dropdown-menu" id="dropDownMenu" aria-
labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">en</a>
<a class="dropdown-item" href="#">de</a>
</div>
</div>
</nav>
You can access the data using jQuery's "attr()" function.
$('#selectmenu1 a').click(
function( event ){
// Prevents browser from treating like normal anchor tag
event.preventDefault()
// Retrieves data in anchor tag
let data = $(this).attr('data')
}
)
Side note, it is possible to use list tags for this in Bootstrap. Bootstrap is really flexible and robust. Also, in my opinion, it would be most semantically correct to use "select".
I found the solution:
I included input-group into my html, as well as included jQuery:
HTML:
<h3 class="display-4" style="font-size: 1.5rem;">What is your eye color</h3>
<div class="dropdown">
<div class="input-group justify-content-center">
<div class="input-group-btn">
<button class="btn btn-info btn-md dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="background-color: #588c7e;">
Eye Color
</button>
<div class="dropdown-menu" onchange="selectMenu1" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#" data="brown" ><img src="img/brown_eye.jpg" class="rounded-circle"> Brown</a>
<a class="dropdown-item" href="#" data="blue" ><img src="img/blue_eye.jpg" class="rounded-circle" > Blue</a>
<a class="dropdown-item" href="#" data="green" ><img src="img/green_eye.jpg" class="rounded-circle" > Green</a>
<a class="dropdown-item" href="#" data="hazel" ><img src="img/hazel_eye.jpg" class="rounded-circle" > Hazel</a>
</div>
</div>
</div>
</div>
<script>
$(".dropdown-menu a ").click(function(){
$(this).parents(".input-group-btn").find('.btn').text($(this).text());
});
</script>

Changing multiple images with JQuery

So here is the JQuery I am using
jQuery(document).ready(function($) {
$('.ltwitch').each(function () {
var tnick = $(this).data('tnick');
var span = $(this).next();
$.getJSON("https://api.twitch.tv/kraken/streams/"+tnick+".json?callback=?", function(c) {
if (c.stream == null) {
span.html("Offline");
} else {
span.html("Online");
}
});
});
});
And the HTML that was with it when I found it
<a class="ltwitch" href="http://www.twitch.tv/ifstudios" data-tnick="IFStudios">IFStudios</a> (<span>...</span>)
RoosterTeeth (...)
Now what I want to do, I have HTML that looks like this
<a href="#portfolioModal3" class="portfolio-link" data-toggle="modal">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/sweet.png" class="img-responsive" alt="">
</a>
Basically when a channel becomes live I want to switch the img src from the image I have it set to, to the same image with -online on the end. So I can have multiple pictures on the website, but I can have the images change dependent on who is live and who isn't.
So if I have
<a href="#portfolioModal3" class="portfolio-link" data-toggle="modal">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/sweet.png" class="img-responsive" alt="">
</a>
When her channel goes live, it will turn to
<a href="#portfolioModal3" class="portfolio-link" data-toggle="modal">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/sweet-online.png" class="img-responsive" alt="">
Or if it was
<img src="img/portfolio/carrot.png"
it would turn to
<img src="img/portfolio/carrot-online.png"
Any ideas?
Try the below code
jQuery(document).ready(function($) {
$('.ltwitch').each(function () {
var tnick = $(this).data('tnick');
var span = $(this).next();
$.getJSON("https://api.twitch.tv/kraken/streams/"+tnick+".json?callback=?", function(c) {
var img = $(img-selector);
var source = img.attr('src');
if (c.stream != null) {
// Online
if(source.indexOf('.png') != -1){
source = source.replace(".png", "-online.png");
img.attr('src',source);
}
}
else{
// Offline
source.replace("-online", "");
img.attr('src',source);
}
});
});
});
Note: You have to pass the correct image selector to $(img-selector). Also call the same function again for refreshing

Event firing and can't avoid happening

I'm new with Javascript, and I'm developing a webapp. I'm using quojs, a library for tactil gestures, but my problem, I think, comes from my inexperience with Javascript. The app y basically, an images gallery that generates dinamically, and lets you interact with each image. On taphold, an interactive menu merges inside the image. On singleTap it should make 2 different actions depending if we are already in "taphold state" or not. If case is we ARE IN TAPHOLD, it showld ONLY desapear the interactive menu inside the image. Then, on the next singleTap (now WITHOUT TAPHOLD STATE), it showld go inside the image. For this, i'm actually using AJAX.
The taphold function is working fine, but the problem is that the tap action, keeps firing no matter what I try to put inside the code to administrate when it must trigger or not.
I know it's a bit difficult to explain and understand, but I couldnt find the solution yet...
Here are the files I'm using.
/////////////////////////////////////// TAP.JS ///////////////////////////////////////////////
$(document).ready(function(){
var quojs = $$(document);
isHold = false;
var all_spans = $$('#mainwrapper', 'div.showhide').hide(),
tapToShowImg = false;
var mobileMenu = $$('.footer-container', '#links-fix').hide();
var mainwrapper = $$('#mainwrapper');
var homeimgscont = $$('.homeimgscont');
var environment = $$.environment();
pinchedIn = true;
pinchedOut = false;
bottomMenu = false;
fullScrn = false;
if ($$.isMobile()) {
mobile = false;
if (environment.screen.width < 500) {
$$('.homeimgscont img.image').addClass('mobile');
mobile = true;
}
}else{
mobile = false;
}
/* SINGLE TAP */
$$('.homeimgscont div').on('singleTap', function(f) {
f.cancelBubble = true;
var allimgs =$$('.image');
console.log(f);
switch(isHold){
case true:
f.cancelBubble = true;
switch(fullScrn){
case true:
$$('.imgcont').show();
allimgs.removeClass('hiddenimgs');
break;
}
$$('.image').removeClass('blur').removeClass('blurmobile');
$$('.imgcont').removeClass('fullscrn');
$$('.homeimgscont .image').removeClass('tappedimg');
mobileMenu.hide();
bottomMenu = false;
all_spans.hide();
isHold = false;
break;
case false:
var singleImg = $$(this).children('.image');
var currentImgId = singleImg.attr('id');
$$('.homeimgscont .image').removeClass('tappedimg');
$$(this).children('.image').addClass('tappedimg');
tapToShowImg = true;
f.cancelBubble = true;
if (f.stopPropagation) f.stopPropagation();
$.ajax ({
type: 'POST',
data: {imgid: currentImgId, insingleimg: 'true', user: usr, usrid: usrid},
url: 'http://agus/home/imgtap.php',
success: function(data) {
$('#main').html(data);
}
});
break;
}
});
/* HOLD */
quojs.on('hold', '.homeimgscont .image', function(e) {
var allimgs =$$('.image');
var currentimg = $$(this);
var thisSpan = currentimg.parent().find('.insideimgmenu.showhide');
var showImgMenu = currentimg.parent().find('.imgmenu.showhide');
all_spans.hide();
switch(mobile){
case true:
if (homeimgscont.hasClass('pinchedin')) {
$$('.imgcont').hide();
currentimg.parent('.imgcont').addClass('fullscrn').show();
fullScrn = true;
}
allimgs.removeClass('blurmobile').removeClass('tappedimg');
currentimg.addClass('blurmobile');
isShowing = thisSpan.show(), showImgMenu.show();
break;
case false:
if (environment.screen.width < 500) {
$$('.imgcont').hide();
currentimg.parent('.imgcont').addClass('fullscrn').show();
fullScrn = true;
allimgs.removeClass('blur').removeClass('tappedimg').addClass('hiddenimgs');
currentimg.removeClass('hiddenimgs').addClass('blur');
isShowing = thisSpan.show(), showImgMenu.show();
}else{
allimgs.removeClass('blur').removeClass('tappedimg').addClass('hiddenimgs');
currentimg.removeClass('hiddenimgs').addClass('blur');
isShowing = thisSpan.show(), showImgMenu.show();
}
break;
}
isHold = true;
e.cancelBubble = true;
e.preventDefault();
e.stopPropagation();
});
});
////////////////////////// GALLERY.PHP //////////////////////////////////////////////////
<div id="mainwrapper" class="main wrapper clearfix">
<div id="flat" class="homeimgscont pinchedin">
<div class="imgcont one">
<img src="IMAGE">
<div class="imgmenu showhide animated fadeInWithOpacity" style="display: none;"></div>
<div class="insideimgmenu showhide animated fadeInUp" style="display: none;">
<span class="titleofpublic">Here goes the title of public.</span>
<div class="icons">
<a href="#myModalEgg1" data-toggle="modal" class="eggicon">
<img src="img/egg.png" alt="egg">
</a>
<a href="#myModalOTP1" data-toggle="modal" class="hearticon">
<img src="img/otp.png" alt="otp">
</a>
<a class="fingersicon" onclick="$(this).click(function(){ $(this).children('img').attr('src','img/hand-green.png'); });">
<img src="img/like.png" alt="like">
</a>
<a href="#myModalMsg1" data-toggle="modal" class="plainicon">
<img src="img/paperplane.png" alt="comment">
</a>
</div><!-- .icons -->
<div class="addedby">
<span class="addedby-span-text">Added By</span>
<span class="addedby-span-name">Rama</span>
<div class="addedby-div-img egg" style="background: url('http://imagizer.imageshack.com/100x100f/539/7p8ZeS.jpg') center no-repeat; background-size: cover;"></div>
</div>
</div><!--.insideimgmenu.showhide-->
</div><!--.imgcont-->
<div class="imgcont two">
<img src="IMAGE">
<div class="imgmenu showhide animated fadeInWithOpacity" style="display: none;"></div>
<div class="insideimgmenu showhide animated fadeInUp" style="display: none;">
<span class="titleofpublic">Here goes the title of public.</span>
<div class="icons">
<a href="#myModalEgg2" data-toggle="modal" class="eggicon">
<img src="img/egg.png" alt="egg">
</a>
<a href="#myModalOTP2" data-toggle="modal" class="hearticon">
<img src="img/otp.png" alt="otp">
</a>
<a class="fingersicon" onclick="$(this).click(function(){ $(this).children('img').attr('src','img/hand-green.png'); });">
<img src="img/like.png" alt="like">
</a>
<a href="#myModalMsg2" data-toggle="modal" class="plainicon">
<img src="img/paperplane.png" alt="comment">
</a>
</div><!-- .icons -->
<div class="addedby">
<span class="addedby-span-text">Added By</span>
<span class="addedby-span-name">Rama</span>
<div class="addedby-div-img egg" style="background: url('http://imagizer.imageshack.com/100x100f/539/7p8ZeS.jpg') center no-repeat; background-size: cover;"></div>
</div>
</div><!--.insideimgmenu.showhide-->
</div><!--.imgcont-->
</div><!--#flat.homeimgscont.pinchedin-->
</div><!-- #mainwrapper .main.wrapper.clearfix -->
As I said, the gallery im using is quojs, thats why im using $$ before some functions. For sure i'm making some basic mistakes with the javascript.
Thanks every help since now!!!
Firstly, try not use a switch for a boolean variable. A if/else statement is more adequate and intuitive in this case.
If you want to cancel the trigger, you can just use a return false;. This will get out of the function.

Ng-click need double click why

I have a little problem : ng-click working if only i do a double-click oO i don't understand, what is wrong ?
This is my controller
function MapCtrl($scope) {
if(navigator.onLine){
$scope.online = true;
} else {
$scope.offline = true;
}
/* text */
$scope.reloadText = "Reload";
$scope.reloadingText = "Reload in progress";
$scope.offlineText = "not online";
$scope.reloadMap = function() {
$scope.reload = true;
$scope.online = false;
$scope.offline = false;
}
}
and my html :
<section class="myPanel panel-padding" ng-controller="MapCtrl">
<div id="myMap">
<div class="alert alert-danger" ng-show="offline">{{offlineText}}</div>
<p ng-show="reload"><i class="fa fa-refresh fa-spin"></i> <span>{{reloadingText}}</span></p>
<div id="map" ng-show="online"></div>
<div id="mapControls">
<ul>
<li ng-hide="reload">
<button type="button" ng-click="reloadMap()" class="btn btn-primary btn-xs">{{reloadText}}</button>
</li>
</ul>
</div>
</div>
</section>
i don't understand why i need to double-click, i want it back to normal :/
reloadMap sets reload to true und your <li> has ng-hide="reload" meaning it is hidden when reload is true. So when you lick once the button should vanish. Clicking a second time or making a doubleclick makes the button visible again.

Categories