I have two functions one thats triggered on a mouseenter event and the other on mouseleave. Both of these functions are repeated three times.
On mouseenter the classlist "active" is addded 5x and the text content is changed.
On mouseleave the classlist active is removed 5x and the text content is set to an empty string, and the original image is displayed again.
When the mouseenter event listener is triggered, Depending on which image is being hovered (3 images).
the text content property that gets added various between the three "Photosnap" "Dine" "Nike".
As-well as the background color that gets triggered various between "red" "blue" "pink".
Hover state shown as red left image and normal state shown as right image
-The image shown here is one of three. It is displayed with a red background and the text content of "photosnap".
-The other with a blue background and the text content of "Dine".
-The third and final with a pink background and the text content of "Nike".
I hope this paints a clear picture i am having a hard time making this a code snippet.
I am trying to refactor this javascript so its not so repetitive. I'm new to javascript and having a hard time getting this to work as something other than what i currently have. I'm not clear on how to make a function that i can call inside of other functions to cut down on the repeated code. Or possibly use the "this" keyword ?
Javascript--
// //Photosnap Project #1 ---------------------------------------------------------
// Content in project on hover
let projectTitle = document.querySelector('.projectTitlePhotosnap');
let projectLine = document.querySelector('.hoverLinePhotosnap');
// View live View code text wrapper
let projectRowWrap = document.querySelector('.flexWrapperRowPhotosnap');
// Background color + image
let photosnapBackground = document.querySelector('.photosnapBackground');
let photosnapImg = document.querySelector('.photosnap');
// Mouse in add background color title and links
photosnapBackground.addEventListener('mouseenter', function() {
photosnapBackground.classList.add('active');
photosnapImg.classList.add('active');
projectTitle.textContent = 'Photosnap';
projectTitle.classList.add('active');
projectLine.classList.add('active');
projectRowWrap.classList.add('active');
});
// Mouse out remove all
photosnapBackground.addEventListener('mouseleave', function() {
photosnapBackground.classList.remove('active');
photosnapImg.classList.remove('active');
dineBackground.classList.remove('active');
dineImg.classList.remove('active');
projectTitle.textContent = '';
projectTitle.classList.remove('active');
projectLine.classList.remove('active');
projectRowWrap.classList.remove('active');
});
//Dine Project #2 ---------------------------------------------------------------
// Content in project on hover
let projectTitleDine = document.querySelector('.projectTitleDine');
let projectLineDine = document.querySelector('.hoverLineDine');
// View live View code text wrapper
let projectRowWrapDine = document.querySelector('.flexWrapperRowDine');
// Background color + image
let dineBackground = document.querySelector('.dineBackground');
let dineImg = document.querySelector('.dine');
// Mouse in add background color title and links
dineBackground.addEventListener('mouseenter', function() {
dineBackground.classList.add('active');
dineImg.classList.add('active');
projectTitleDine.textContent = 'Dine';
projectTitleDine.classList.add('active');
projectLineDine.classList.add('active');
projectRowWrapDine.classList.add('active');
});
// Mouse out remove all
dineBackground.addEventListener('mouseleave', function() {
dineBackground.classList.remove('active');
dineImg.classList.remove('active');
projectTitleDine.textContent = '';
projectTitleDine.classList.remove('active');
projectLineDine.classList.remove('active');
projectRowWrapDine.classList.remove('active');
});
//Nike Project #3 ---------------------------------------------------------------
// Content in project on hover
let projectTitleNike = document.querySelector('.projectTitleNike');
let projectLineNike = document.querySelector('.hoverLineNike');
// View live View Code wrapper
let projectRowWrapNike = document.querySelector('.flexWrapperRowNike');
// Background color + image
let nikeBackground = document.querySelector('.nikeBackground');
let nikeImg = document.querySelector('.nike');
// Mouse in add background color title and links
nikeBackground.addEventListener('mouseenter', function() {
nikeBackground.classList.add('active');
nikeImg.classList.add('active');
projectTitleNike.textContent = 'Nike';
projectTitleNike.classList.add('active');
projectLineNike.classList.add('active');
projectRowWrapNike.classList.add('active');
});
// Mouse out remove all
nikeBackground.addEventListener('mouseleave', function() {
nikeBackground.classList.remove('active');
nikeImg.classList.remove('active');
projectTitleNike.textContent = '';
projectTitleNike.classList.remove('active');
projectLineNike.classList.remove('active');
projectRowWrapNike.classList.remove('active');
HTML--
<!-- Projects desktop -->
<div id="horizontalScroll" class="horizontalScroll projectsContainer">
<!-- Photosnap -->
<div class="projectsWrapper photosnapBackground">
<span class="testFunc hoverTitleFont projectTitlePhotosnap"></span>
<div class="testFunc hoverLine hoverLinePhotosnap"></div>
<img src="assets/projects/photosnap-desktop-p.jpg" alt="photosnap project" class="photosnap">
<div class="testFunc flexWrapperRow flexWrapperRowPhotosnap">
<a target="_blank" rel="noopener noreferrer" href="">
<span class="hoverIconFont">View Live</span>
</a>
<a target="_blank" rel="noopener noreferrer" href="">
<span class="hoverIconFont">View Code</span>
</a>
</div>
</div>
<!-- Dine -->
<div class="projectsWrapper dineBackground">
<span class="testFunc hoverTitleFont projectTitleDine"></span>
<div class="testFunc hoverLine hoverLineDine"></div>
<img src="assets/projects/dine-desktop-p.png" alt="dine project" class="dine">
<div class="testFunc flexWrapperRow flexWrapperRowDine">
<a target="_blank" rel="noopener noreferrer" href="">
<span class="hoverIconFont">View Live</span>
</a>
<a target="_blank" rel="noopener noreferrer" href="">
<span class="hoverIconFont">View Code</span>
</a>
</div>
</div>
<!-- Nike -->
<div class="projectsWrapper nikeBackground">
<span class="hoverTitleFont projectTitleNike"></span>
<div class="hoverLine hoverLineNike"></div>
<img src="assets/projects/nike-desktop-p.png" alt="nike project" class="nike">
<div class="flexWrapperRow flexWrapperRowNike">
<a target="_blank" rel="noopener noreferrer" href="">
<span class="hoverIconFont">View Live</span>
</a>
<a target="_blank" rel="noopener noreferrer" href="">
<span class="hoverIconFont">View Code</span>
</a>
</div>
</div>
</div>
Yes you're using 3 times the same function, so we sure can do better.
Here is a first simple idea, make a loop on the tree elements :
JAVASCRIPT
let slide = ['Photosnap', 'Dine', 'Nike'] ;
for (let i = 0; i < slide.length ; i++ ) {
let lowercaseName = slide[i].toLowerCase() ;
let projectTitle = document.querySelector('.projectTitle' + slide[i]);
let projectLine = document.querySelector('.hoverLine' + slide[i]);
// View live View code text wrapper
let projectRowWrap = document.querySelector('.flexWrapperRow'+ slide[i]);
// Background color + image
let background = document.querySelector('.'+ lowercaseName+'Background');
let img = document.querySelector('.'+ lowercaseName);
// Mouse in add background color title and links
background.addEventListener('mouseenter', function() {
background.classList.add('active');
img.classList.add('active');
projectTitle.textContent = slide[i];
projectTitle.classList.add('active');
projectLine.classList.add('active');
projectRowWrap.classList.add('active');
});
// Mouse out remove all
background.addEventListener('mouseleave', function() {
background.classList.remove('active');
img.classList.remove('active');
background.classList.remove('active');
img.classList.remove('active');
projectTitle.textContent = '';
projectTitle.classList.remove('active');
projectLine.classList.remove('active');
projectRowWrap.classList.remove('active');
});
}
Another approche, or to upgrate this solution can be use "data" attribute, like "data-id" or "data-color" you can give the name you want and have as many "data" atributes you want on DOM element.
You could save classname too, catching element's child of the main block with .childNodes.
I would suggest some updation in html structure before we move to javascript.
We want to keep HTML as much strucutural as we want. So that similar elements can be easily selected.
Make it easier to group project related element.
Remove unnecessary class name.
Added comments where every necessary.
<!-- Projects desktop -->
<div id="horizontalScroll" class="horizontalScroll projectsContainer">
<!-- Photosnap -->
<div class="projectsWrapper photosnap Background"> <!-- Remove backgound here, if you its needed for class selection in css seperate it -->
<span class="testFunc hoverTitleFont projectTitle"></span> <!-- Remove photosnap-->
<div class="testFunc hoverLine"></div> <!-- Remove hoverLinePhotosnap-->
<img src="assets/projects/photosnap-desktop-p.jpg" alt="photosnap project" class="photosnapImg"> <!-- Since there is only 1 img tag inside photosnap we can select through img tag-->
<div class="testFunc flexWrapperRow"> <!-- remove flexWrapperRowPhotosnap-->
<a target="_blank" rel="noopener noreferrer" href="">
<span class="hoverIconFont">View Live</span>
</a>
<a target="_blank" rel="noopener noreferrer" href="">
<span class="hoverIconFont">View Code</span>
</a>
</div>
</div>
<!-- Dine -->
<div class="projectsWrapper dine Background"> <!-- seperated background-->
<span class="testFunc hoverTitleFont projectTitle"></span> <!--remove Dine-->
<div class="testFunc hoverLine"></div> <!--remove hoverLineDine-->
<img src="assets/projects/dine-desktop-p.png" alt="dine project" class="dineImg">
<div class="testFunc flexWrapperRow"> <!--removed flexWrapperRowDine-->
<a target="_blank" rel="noopener noreferrer" href="">
<span class="hoverIconFont">View Live</span>
</a>
<a target="_blank" rel="noopener noreferrer" href="">
<span class="hoverIconFont">View Code</span>
</a>
</div>
</div>
<!-- Nike -->
<div class="projectsWrapper nike Background"> <!--seperated backgound-->
<span class="hoverTitleFont projectTitle"></span> <!--removed nike-->
<div class="hoverLine"></div> <!--removed hoverLineNike-->
<img src="assets/projects/nike-desktop-p.png" alt="nike project" class="nikeImg">
<div class="flexWrapperRow"> <!--removed flexWrapperRowNike-->
<a target="_blank" rel="noopener noreferrer" href="">
<span class="hoverIconFont">View Live</span>
</a>
<a target="_blank" rel="noopener noreferrer" href="">
<span class="hoverIconFont">View Code</span>
</a>
</div>
</div>
</div>
Now we have our proper html structure we can move to js
A function to add class and other property to the element
A function to remove class from the element
// property being an object {textContent: "photosnap", backgroundColor: "red"}
function addProperty(element, property) {
// I belive there are 4 Elements that need to be selected
const title = element.querySelector("projectTitle");
const projectLine = element.querySelector("hoverLine");
const projectRowWrap = element.querySelector("flexWrapperRow");
const image = element.querySelector("img");
// if removing looks like code duplicate elements can be pushed to an array, and iterate over it to add/remove the class
/*
const elementList = [];
elementList.push(element);
elementList.push(image);
elementList.push(title);
elementList.push(projectLine);
elementList.push(projectRowWrap);
elementList.forEach(el => {
el.classList.add("active");
});
*/
title.textContent = property.textContent;
element.classList.add("active");
image.classList.add("active");
title.classList.add("active");
projectLine.classList.add("active");
projectRowWrap.classList.add("active");
}
function removeProperty(element) {
const title = element.querySelector("projectTitle");
const projectLine = element.querySelector("hoverLine");
const projectRowWrap = element.querySelector("flexWrapperRow");
const image = element.querySelector("img");
title.textContent = "";
element.classList.remove("active");
image.classList.remove("active");
title.classList.remove("active");
projectLine.classList.remove("active");
projectRowWrap.classList.remove("active");
}
const element = document.querySelector("photosnap");
element.addEventListener("mouseenter", (event) => {
const eventElement = event.target;
const property = { textContent: "photosnap" };
addProperty(eventElement, property);
});
element.addEventListener("mouseleave", (event) => {
removeProperty(event.target);
});
Related
I don't know how to explain this because I am an amateur.
I have a language menu with 6 languages: Es, Br, Fr, It, De, En
So, I have the default language selected EN and a dropdown with the rest of the images.
The question is: how can I update the text and the image when I click on It (for example).
My structure is like this:
$(".dropbtn, .burger").click(function() {
$(this).next(".dropdown-content, .items").stop().slideToggle(500);
//$(this).find(".arrow-up, .arrow-down").toggle();
});
// If you click outside dropdown - close dropdown
var $menu = $('.dropdown');
$(document).mouseup(function(e) {
if (!$menu.is(e.target) && $menu.has(e.target).length === 0) {
$('.dropdown-content').hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="javascript:void(0)" class="dropbtn">
<img src="assets/img/languages/flag_en.png" alt=""> EN
<span class="ico ico-pointer_down"></span>
</a>
<div class="dropdown-content" id="dd-content">
<img src="assets/img/languages/flag_br.png" alt=""> PT
<img src="assets/img/languages/flag_es.png" alt=""> ES
<img src="assets/img/languages/flag_fr.png" alt=""> FR
<img src="assets/img/languages/flag_de.png" alt=""> DE
<img src="assets/img/languages/flag_it.png" alt=""> IT
</div>
You could wrap the text in the span like :
<span class="lang">EN</span>
And attach click event then on click copy the text and image to the .dropbtn and hide the clicked anchor using hide class and finally remove the class hide from all the other anchors, like :
$(".dropbtn").click(function() {
$(this).next(".dropdown-content, .items").stop().slideToggle(500);
});
// If you click outside dropdown - close dropdown
var $menu = $('.dropdown');
$(document).mouseup(function(e) {
if (!$menu.is(e.target) && $menu.has(e.target).length === 0) {
$('.dropdown-content').hide();
}
});
$("#dd-content a").click(function() {
var text = $(this).text();
var img = $(this).find('img').clone(true);
$('.dropbtn .lang').text(text);
$('.dropbtn img').replaceWith(img);
$("#dd-content a").removeClass('hide');
$(this).addClass('hide');
});
a.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="javascript:void(0)" class="dropbtn">
<img src="assets/img/languages/flag_en.png" alt=""><span class="lang">EN</span>
<span class="ico ico-pointer_down"></span>
</a>
<div class="dropdown-content" id="dd-content">
<img src="assets/img/languages/flag_en.png" alt=""> EN
<img src="assets/img/languages/flag_br.png" alt=""> PT
<img src="assets/img/languages/flag_es.png" alt=""> ES
<img src="assets/img/languages/flag_fr.png" alt=""> FR
<img src="assets/img/languages/flag_de.png" alt=""> DE
<img src="assets/img/languages/flag_it.png" alt=""> IT
</div>
First of all you need a click event-handler for your images.
You are using a click event-handler already.
$(".dropdown-content img").click(function (e) {});
Inside your event-handler you need to define what to do.
Your mission is to change the src attribute.
So what you need to do first is to save the attribute in a variable.
var src = $(this).attr("src");
Then you need to change the attribute of the image you want to change.
$(".dropbtn").attr("src", src); //<-- the first parameter defines the attribute you want to change.
//The second attribute is our variable we set earlier.
In the end, it should look like this:
$(".dropdown-content img").click(function (e) {
var src = $(this).attr("src"); //<-- getting the attribute of the clicked element (this)
$(".dropbtn").attr("src", src); //<-- changing the attribute.
});
There are a lot of guides out there that can help you out.
However, this is not best practise for internalization but might be good to learn some basic JQuery and JS rules.
I would wrap the country name in a span. Then, when you click on the language options, swap out the image src and text for the chosen language.
I have added a little css to help illustrate the image src changing.
$(".dropbtn, .burger").click(function(e) {
e.preventDefault();
$(this).next(".dropdown-content, .items").stop().slideToggle(500);
//$(this).find(".arrow-up, .arrow-down").toggle();
});
// If you click outside dropdown - close dropdown
var $menu = $('.dropdown');
$(document).mouseup(function(e) {
if (!$menu.is(e.target) && $menu.has(e.target).length === 0) {
$('.dropdown-content').hide();
}
});
var $lang = $('.dropbtn');
//when user clicks on language
$('.dropdown-content').on('click', 'a', function(e) {
e.preventDefault();
var $this = $(this),
$img = $this.find('img');
//set the image of .dropbtn to the chosen image
$lang.find('img').attr('src', $img.attr('src'));
//set the name of the language
$lang.find('.lang-name').text($this.text());
});
<!-- added to help visualise the image src attribute changing. Can be safely ignored. -->
.dropbtn img:after {
content: attr(src);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" class="dropbtn">
<img src="assets/img/languages/flag_en.png" alt=""> <span class="lang-name">EN</span>
<span class="ico ico-pointer_down"></span>
</a>
<div class="dropdown-content" id="dd-content">
<img src="assets/img/languages/flag_br.png" alt=""> PT
<img src="assets/img/languages/flag_es.png" alt=""> ES
<img src="assets/img/languages/flag_fr.png" alt=""> FR
<img src="assets/img/languages/flag_de.png" alt=""> DE
<img src="assets/img/languages/flag_it.png" alt=""> IT
</div>
I have a list of images and I want to be changed when I hover on it and then change back to the previous image on mouse leave. and each image is different. I have done it but the event is being executed on two images only when the mouse hovers on the first item. and I couldn't figure out the right way.
//html code//
<li>
<div class="card">
<img class="my-img" id="my-img1" src="./images/AMH010301_G-1-dresslink.jpg" alt="Denim Jeans">
<h1>Lorem1</h1>
<span class="price-first">$24.99</span>
<span class="price">$17.99</span>
<br>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<p>Lorem ipsum dolor sit amet..</p>
<button class="add-to">Add to Cart</button>
</div>
</li>
<li>
<div class="card">
<img class="my-img" id="my-img2" src="./images/AMH010327_W-1-dresslink.jpg" alt="Denim Jeans">
<h1>Lorem2</h1>
<span class="price-first">$24.99</span>
<span class="price">$14.99</span>
<br>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<p>Lorem ipsum dolor sit amet..</p>
<button class="add-to">Add to Cart</button>
</div>
</li>
//JavaScript//
let img = document.querySelectorAll('.card img');
for (var i = 0; i < img.length; i++) {
img[i].addEventListener('mouseover', hover);
img[i].addEventListener('mouseout', leave);
}
function hover() {
document.getElementById("my-img1").src = "./images/AMH010301_G-5-dresslink.jpg";
document.getElementById("my-img2").src = "./images/AMH010327_W-5-dresslink.jpg";
}
function leave() {
document.getElementById("my-img1").src = "./images/AMH010301_G-1-dresslink.jpg";
document.getElementById("my-img2").src = "./images/AMH010327_W-1-dresslink.jpg";
}
First it seems you are only attaching your event to one of the images and not both. The code below will loop through all of the images and attach event to them.
let img = document.querySelectorAll('.card img');
for (var i = 0; i < img.length; i++)
{
img[i].addEventListener('mouseover', hover);
img[i].addEventListener('mouseout', leave);
}
Second the event that you are attaching to the images does not look at which image is being hovered it just changes the images for both of them. The following code will look at the image that you are hovering over and only modify that.
function hover(e) { e.target.src = e.target.getAttribute("data-hover-img"); }
function leave(e) { e.target.src = e.target.getAttribute("data-leave-img"); }
Finally for each image to have different images to change to and from on and off hover you need to store that information somewhere connected to the image. I chose to go with data attributes as seen above. So the HTML for your images should look like this.
<img class="my-img" id="my-img1" src="./images/AMH010301_G-1-dresslink.jpg" data-hover-img=""./images/AMH010301_G-5-dresslink.jpg"" data-leave-img="./images/AMH010301_G-1-dresslink.jpg" alt="Denim Jeans">
<img class="my-img" id="my-img2" src="./images/AMH010327_W-1-dresslink.jpg" data-hover-img="./images/AMH010327_W-5-dresslink.jpg" data-leave-img="./images/AMH010327_W-1-dresslink.jpg" alt="Denim Jeans">
On every iteration you select the same image....
document.querySelector('.my-img') <-- selects first image with the class
So you just bound mouseover to the first image multiple times. Now if you fixed the loop to select the correct image, you still would have an issue because your hover code does not look know what image you are hovering and you change all of the images inside of the method.
So you could add in logic into the hover or you could just simplify your code.
So what you want to do is when you hover over an image it changes to a different image. One of the easiest things to do is to use data-attributes and a mouse events.
document.querySelectorAll('[data-src2]').forEach(function (img) {
img.addEventListener('mouseenter', function() {
if (!img.dataset.src) { // see if we hovered yet
img.dataset.src = this.src // if not set orginal source so we can flip back
}
img.src = this.dataset.src2 //set src to second image
})
img.addEventListener('mouseleave', function() {
img.src = this.dataset.src //set back to orginal
})
})
<img src="https://placekitten.com/200/300" data-src2="https://placekitten.com/g/200/300" />
<img src="https://placekitten.com/200/200" data-src2="https://placekitten.com/g/200/200" />
Are you asking how to register the eventlisteners and be able to backtrack which element fired the event? Something like:
img[i] = document.querySelector('.my-img').addEventListener('mouseover', function() { theselectedElement=i; hover();});
(2 statements- one for the event and another for the element) and then process the events depending on the selected element?
This is my following code:
<div class="w3-container" id="menuTopics">
<button>
<a href="//somesite.com/someparam">
<img src="/images/keywordicons/leadership.svg" class="keyicon" />Leadership
</a>
</button>
<button>.......</button>
</div>
I want to set an onclick event for the button like this which will hold the value of the href attribute
<div class="w3-container" id="menuTopics">
<button onclick="window.location.href='//somesite.com/someparam'">
<a href="//somesite.com/someparam">
<img src="/images/keywordicons/leadership.svg" class="keyicon" />Leadership
</a>
</button>
<button>.......</button>
</div>
since href holds the value of the url, I want the same for onclick event. This is my requirement.
The following is the javascript I have written.
var getChilds = document.querySelectorAll("#menuTopics button");
getChilds.forEach(function (item) {
item.setAttribute('onclick', 'location.href=""');
})
However I donot know how to get the value of the href from a tag.
You need to grab the href value to assign it.
var getChilds = document.querySelectorAll("#menuTopics button");
var href = document.getElementsByTagName('a')[0].href;
getChilds.forEach(function(item) {
item.setAttribute('onclick', `location.href='${href}'`);
})
var buttons = document.getElementsByTagName('button');
console.log('these are your buttons with on click events', ...buttons)
<div class="w3-container" id="menuTopics">
<button>
<a href="//somesite.com/someparam">
<img src="/images/keywordicons/leadership.svg" class="keyicon" />Leadership
</a>
</button>
<button>.......</button>
</div>
I'm new to JQuery. The assignment I have to do is a card game where two players play to beat each other's sum. Anyways I am having trouble with the initial step of getting the game area to show up once the user enters their names and clicks "new game". I was able to successfully hide the game when the page loads, but at the moment when I enter the names and click new game, nothing happens. I prevented defaults and I do have the .show in there in the method as well. Does anyone know how to do this? This is my code so far:
$(document).ready(function(){
$(".GameArea").hide();
GameStart();
});
function GameStart(){
$(".PlayerID").on("button",function(event) {
event.preventDefault();
setupUsers();
turnSetUp();
});
}
function setupUsers(){
Player1Name = document.PlayerName;
Player2Name = document.PlayerName2;
var player1Score = 0;
var player2Score = 0;
var x = [[Player1Name,Player1Score], [Player2Name, Player2Score]];
$(".GameArea").show();
}
function turnSetUp(){
$.post("link.php") //this is a full php address that was provided to me, ignore the link
.done(function (data){
var deck = $.parseJSON(data);
resetListeners();
//deck.Cards[0] is the value to beat
//loop to get the remainder cards from the deck
});
}
function resetListeners(){
$(".GameArea a").on("click", function(fixCard){
//event.preventDefault();
//console.log( $( this ).text() );
});
}
function fixCard(){
}
function calculateCurrentScore(){
}
function EndGame(){
}
This is the Game Area of the html too
<div class="GameArea">
<span id="firstgroup">
<a href="">
<img src="Desktop Cards/desktopCard0.png" alt="0"/>
</a>
<a href="">
<img src="Desktop Cards/desktopCard1.png" alt="1"/>
</a>
<a href="">
<img src="Desktop Cards/desktopCard2.png" alt="2"/>
</a>
<a href="">
<img src="Desktop Cards/desktopCard3.png" alt="3"/>
</a>
<a href="">
<img src="Desktop Cards/desktopCard4.png" alt="4"/>
</a>
</span>
<span id="secondgroup">
<a href="">
<img src="Desktop Cards/desktopCard0.png" alt="0"/>
</a>
<a href="">
<img src="Desktop Cards/desktopCard1.png" alt="1"/>
</a>
<a href="">
<img src="Desktop Cards/desktopCard2.png" alt="2"/>
</a>
<a href="">
<img src="Desktop Cards/desktopCard3.png" alt="3"/>
</a>
<a href="">
<img src="Desktop Cards/desktopCard4.png" alt="4"/>
</a>
</span>
</div>
I think you may be having an error here in your code.
function GameStart(){
$(".PlayerID").on("button",function(event) {
event.preventDefault();
setupUsers();
turnSetUp();
});
}
when using the jquery on function you are saying on "button" which really doesn't mean anything, what we need to do is select the button in the $([button id]) and create an on click event. Kind of like this.
$("[id for area to show]").on("click",function(event) {
//code to display game area goes here.
}
In the future I would isolating the issue, or even checking out the developer console on google chrome. The error messages can be easily tracked here, and can let you know what is going wrong.
Below is my HTML code,
<div id="Navigation" class="md-dialog-full">
<div class="products-options">
<a ng-click='addType("Physical")' href="javascript:void(0);">
<h1>Physical</h1>
<label>An item that is shipped to your customers</label>
</a>
<a ng-click='addType("Digital")' href="javascript:void(0);">
<h1>Digital</h1>
<label>Content that is downloaded</label>
</a>
<a ng-click='addType("Service")' href="javascript:void(0);">
<h1>Services</h1>
<label>Provide a Service</label>
</a>
</div>
</div>
I want to highlight the selected hyperlink, I have tried many methods in internet but almost all are linked with the URL of the hyperlink. Please help. I have succeed in using hover to highlight when hovering over a link but I'm stuck in highlighting the clicked link.
If you say your code does not have url paths, I'm assuming that all of this needs to happen within the same view and the same controller. In that case, you can put a variable on the scope, say selectedLink, and use ng-class to apply the proper styling:
<div id="Navigation" class="md-dialog-full">
<div class="products-options">
<a ng-click='addType("Physical");selectedLink = "Physical"' href="javascript:void(0);" ng-class="{'selected': selectedLink === 'Physical'}">
<h1>Physical</h1>
<label>An item that is shipped to your customers</label>
</a>
<a ng-click='addType("Digital");selectedLink = "Digital"' href="javascript:void(0);" ng-class="{'selected': selectedLink === 'Digital'}">
<h1>Digital</h1>
<label>Content that is downloaded</label>
</a>
<a ng-click='addType("Service");selectedLink = "Service"' href="javascript:void(0);" ng-class="{'selected': selectedLink === 'Service'}">
<h1>Services</h1>
<label>Provide a Service</label>
</a>
</div>
</div>
css:
.selected { color: yellow; }
You can try something like this:
<a ng-click='addType("Physical"); visited = true' ng-class="{'visited' : visited}" href="javascript:void(0);"></a>
<div id="Navigation" class="md-dialog-full">
<div class="products-options">
<a ng-click='addType("Physical")' href="javascript:void(0);" class="{selectedPhysical}">
<h1>Physical</h1>
<label>An item that is shipped to your customers</label>
</a>
<a ng-click='addType("Digital")' href="javascript:void(0);" class="{selectedDigital}">
<h1>Digital</h1>
<label>Content that is downloaded</label>
</a>
<a ng-click='addType("Service")' href="javascript:void(0);" class="{selectedService}">
<h1>Services</h1>
<label>Provide a Service</label>
</a>
</div>
</div>
in your controller
$scope.addType = function(type){
if(type == 'Physical'){
$scope.selectedPhysical = 'selectedLink'
$scope.selectedDigital = ''
$scope.selectedService = ''
}
else if(type == 'Digital'){
$scope.selectedDigital = 'selectedLink'
$scope.selectedService = ''
$scope.selectedPhysical = ''
}
else{
$scope.selectedService = 'selectedLink'
$scope.selectedDigital = ''
$scope.selectedPhysical = ''
}
}
add css for selectedLink
.selectedLink{
color : Blue;
font-size: 1.2em;
//whatever the changes you want to made for the active link text
}
If you are using this you can overwrite the browser Active pseudo class