I want to hide left panel when clicking the "TEXT", and also when an item is searched from autocomplete search box. So my aim is to not overlap the autocomplete items and panel.
Here is my fiddle: http://jsfiddle.net/zzzzz/get0d9ro/7/
temp = 1;
$("#label").on('click', function(){
if(temp == 1){
$('#panellist').toggle();
temp = 0;
}
else{
temp = 1;
$('#panellist').toggle();
}
});
You need to wrap your binding in a $(document).ready() handler if you want to place it above the element itself:
$(document).ready(function () {
var temp = 1;
$("#label").on('click', function(){
if(temp == 1){
$('#panellist').toggle();
temp = 0;
}
else{
temp = 1;
$('#panellist').toggle();
}
});
});
Related
i have a div with multiple images inside and i need to click on a random image then again click on a random picture and when i clicked the second image to change images with each other. All images are interchangeable.Heres what i've done so far:
EDIT FIDDLE: http://jsfiddle.net/w53Ls/5/
$("#image1").click(function(){
imagePath = $("#image2").attr("src");
if(imagePath == "http://s15.postimg.org/oznwrj0az/image.jpg"){
$("#image3").attr("src", "http://s21.postimg.org/ojn1m2eev/image.jpg");
}else{
$("#image4").attr("src", "http://s23.postimg.org/epckxn8uz/image.jpg");
}
});
EDIT: The code i have tryed for check function is in EDIT FIDDLE and with the alert i check src of pictures.Now i simply need to make a condition to alert something after i change all the pieces in order and found the whole picture.Any hint?
DEMO
var clickCount = 0;
var imgSrc;
var lastImgId;
$("img.element").click(function(){
if (clickCount == 0)
{
imgSrc = $(this).attr("src");
lastImgId = $(this).attr("id");
clickCount++;
}
else {
$("#"+lastImgId).attr("src",$(this).attr("src"));
$(this).attr("src",imgSrc)
clickCount = 0;
}
});
Updated
This let's you know when you're done with the puzzle
DEMO
var clickCount = 0;
var imgSrc;
var lastImgId;
// Function for Comparing Arrays
// source: http://stackoverflow.com/questions/7837456/
Array.prototype.compare = function (array) {
if (!array) return false;
if (this.length != array.length) return false;
for (var i = 0, l = this.length; i < l; i++) {
if (this[i] instanceof Array && array[i] instanceof Array) {
if (!this[i].compare(array[i])) return false;
} else if (this[i] != array[i]) {
return false;
}
}
return true;
}
$(document).ready(function () {
// Store the correct order first in an array.
var correctOrder = $("#puzzle > img").map(function () {
return $(this).attr("src");
}).get();
// Randomize your images
var a = $("#puzzle > img").remove().toArray();
for (var i = a.length - 1; i >= 1; i--) {
var j = Math.floor(Math.random() * (i + 1));
var bi = a[i];
var bj = a[j];
a[i] = bj;
a[j] = bi;
}
$("#puzzle").append(a);
$("img.element").click(function () {
if (clickCount == 0) {
imgSrc = $(this).attr("src");
lastImgId = $(this).attr("id");
clickCount++;
} else {
$("#" + lastImgId).attr("src", $(this).attr("src"));
$(this).attr("src", imgSrc);
clickCount = 0;
// Get the current order of the images
var currentOrder = $("#puzzle > img").map(function () {
return $(this).attr("src");
}).get();
// Compare the current order with the correct order
if (currentOrder.compare(correctOrder)) alert("Puzzle completed");
}
});
});
http://jsfiddle.net/w53Ls/2/
var counter = 0;
The code was improvised but works XD
you try improve it
Here is a new version of your jsfiddle that I think will do what you want.
It applies the same click handler to every object with the class swapable. Each time a swapable element is clicked, the handler checks whether another element was previously clicked first. If so, it swaps them. If not, it just remembers that this element is the first one.
var firstId = ''; // Initially, no element has been clicked first
var firstSrc = '';
// Apply the following function to every element with 'class="swapable"
$('.swapable').click(function(){
if (firstId !== '') { // There is already a first element clicked
// Remember the information of the currently clicked element
var secondId = $(this).attr('id');
var secondSrc = $(this).attr('src');
// Replace the currently clicked element with the first one
$('#' + secondId).attr('src', firstSrc);
// Replace the first one with the current one
$('#' + firstId).attr('src', secondSrc);
// Forget the first one, so that the next click will produce a new first
firstId = '';
firstSrc = '';
}
else // This is the first element clicked (this sequence)
{
// Remember this information for when a second is clicked
firstId = $(this).attr('id');
firstSrc = $(this).attr('src');
}
});
I have a function that swaps the selected item in a select box (listbox) with the item above it which works ok but I want to make it so that the item is still selected afterwords. So if the user wanted to keep moving the item upwards in the box he could keep pressing the Move Up button.
function moveUp() {
var list = document.getElementById('listbox');
var numSelected = list.selectedIndex;
var itemSelected = list.options;
if (itemSelected[numSelected].id == 0) {
alert("Can't move this up the list!");
} else {
if (poiArrayList[numSelected - 1] != null) {
var tempPOI = poiArrayList[numSelected];
poiArrayList[numSelected] = poiArrayList[numSelected - 1];
poiArrayList[numSelected - 1] = tempPOI;
//The line below is what I have but that doesn't seem to work.
list.selectedIndex = numSelected;
} else {
alert("The listbox is empty!");
}
}
}
Full code
Have a look here: http://jsfiddle.net/2ae9B/1/
I've added an optional parameter to generateListBox(), where you can set the index to be highlighted once the list is generated. For example:
function moveUp() {
var list = document.getElementById('listbox');
var numSelected = list.selectedIndex;
...
...
// regenerate the list passing the item to select
generateListBox(numSelected - 1);
}
and
function generateListBox(selectedIndex) {
var selectBox = document.getElementById("listbox");
selectBox.innerHTML = "";
for (var i = 0; i < poiArrayList.length; i++) {
lbAddItem(poiArrayList[i].name, i);
}
// you should also check that is a valid integer here
if(selectedIndex)
selectBox.selectedIndex = selectedIndex;
}
Hope it helps
HTML
<div id="top" class="shadow">
<ul class="gprc">
<li>Home</li>
<li>Text1</li>
<li>Text2</li>
<li>Text3</li>
<li>Text4</li>
</ul>
Javascript
window.onload = setActive;
function setActive() {
aObj = document.getElementById('top').getElementsByTagName('a');
var found = false;
for (i = 0; i < aObj.length; i++) {
if (document.location.href.indexOf(aObj[i].href) >= 0) {
aObj[i].className = 'active';
found = true;
}
}
if (!found) {
aObj[0].className = 'active';
}
}
The problem is that the menu home link remains selected or active all the time even if i click on other links and I would like to make it not selected on loading of the page and also to remain non-selected while other link that i clicked and i am on the specific landing page remains selected. Please only Javascript no JQUERY.
Try this:
window.onload = setActive;
function setActive() {
var aObj = document.getElementById('top').getElementsByTagName('a');
var found = false;
for(var i=aObj.length-1; i>=1 && !found; i--) {
if(document.location.href.indexOf(aObj[i].href)>=0) {
aObj[i].className='active';
found = true;
}
}
//if you never want home selected remove the next
if(!found && document.location.href.replace(/\/$/, "") == aObj[0].href.replace(/\/$/, ""))
aObj[0].className = 'active';
}
With this way you start at the end of the list, and when you find a coincidence it stop the search of an active link.
I hope it helps you
function setActive() {
var top = document.getElementById('top'),
aObj = top.getElementsByTagName('a'),
href = document.location.href,
found = false;
for (var i = 0; i < aObj.length || !found; i++) {
if (href.indexOf(aObj[i].href) >= 0) {
aObj[i].className = 'active';
found = true;
}
}
if (!found) {
aObj[0].className = 'active';
}
//Listen for link clicks
function listener(e) {
if(e.target.tagName === "A") {
for (var i = 0; i<aObj.length; i++) {//remove previous class
aObj[i].className = "";
}
e.target.className = "active";
}
}
if(top.addEventListener) {
top.addEventListener(listener);
} else if(top.attachEvent) {
top.attachEvent(listener);
}
}
You're going to need to listen to the click event so you can determine if one of your links is pressed. I'm going to do this using some simple delegation
I need guidance editing a file. I have posted the Javascript below. This is a link to my working example http://www.closetos.com/top-shelf-awards_copy_copy.
The problem occurred when I added an additional row to the table. Now, when you select the text link in a cell in the second row, it stays selected and active, when clicking on something in the top row.
function $(id)
{
return document.getElementById(id);
}
function Coalesce(Value, Default)
{
if(Value == null)
return Default;
return Value;
}
function Switcher(numberOfSections, sectionContainerID, activeClass, inactiveClass)
{
this.NumberOfSections = Coalesce(numberOfSections, 1) - 1;
this.SectionContainerID = Coalesce(sectionContainerID, "sectionContainer");
this.ActiveClass = Coalesce(activeClass, "active");
this.InactiveClass = Coalesce(inactiveClass, "");
}
Switcher.prototype.Switch = function(TheLink, SectionID)
{
// Make sure all sections are hidden
var SectionContainer = $(this.SectionContainerID);
for(var ct = 0; ct < SectionContainer.childNodes.length; ct++)
{
var node = SectionContainer.childNodes[ct];
if(node.nodeType != 1)
continue;
node.style.display = "none";
}
var First = true;
// Reset button styles
for(var ct = 0; ct < TheLink.parentNode.childNodes.length; ct++)
{
if(TheLink.parentNode.childNodes[ct].nodeType != 1)
continue;
else node = TheLink.parentNode.childNodes[ct];
node.className = this.InactiveClass;
if(First)
{
node.className += " firstCell";
First = false;
}
}
// Show the selected section
$(SectionID).style.display = "block";
TheLink.className = this.ActiveClass;
if(TheLink == node)
TheLink.className += " lastCell";
}
You problem is in this section of code. this looks only at the row that the clicked cell is in. TheLink.parentNode is a reference to the row that the cell is in.
for(var ct = 0; ct < TheLink.parentNode.childNodes.length; ct++) <--- parenNode == row
{
if(TheLink.parentNode.childNodes[ct].nodeType != 1)
{
continue;
}
else
{
node = TheLink.parentNode.childNodes[ct];
}
node.className = this.InactiveClass;
if(First)
{
node.className += " firstCell";
First = false;
}
}
In order to make this work with multiple rows you need to modify it to look at other rows in the table:
for(var ct = 0; ct < TheLink.parentNode.parentNode.childNodes.length; ct++)
{
for( innerL = 0; innerL < TheLink.parentNode.parentNode.childNodes[ct].childNodes.length; innerL++)
{
if(TheLink.parentNode.parentNode.childNodes[ct].childNodes[innerL].nodeType != 1)
{
continue;
}
else
{
node = TheLink.parentNode.parentNode.childNodes[ct].childNodes[innerL];
}
node.className = this.InactiveClass;
if(First)
{
node.className += " firstCell";
First = false;
}
}
}
in the block above you are looking at the parentNode's (the tr) parentNode (tbody) and then iterating through its grandchildren. This allows you to capture all the cells in the table, not just the row.
Here is an example of it working. When you follow the link you need to hit the green 'run' button on the bottom left of the page to get the script to load.
I want this code to check if the user has clicked inside the open box and if so then it will keep it open, also if the user clicks outside the box it will close.
http://jsfiddle.net/MTJa5/26/
var boxes = function(){
var divClicks = document.getElementsByClassName("clickToShow");
for(i=0; i < divClicks.length; i++){
var click = divClicks[i];
var clickEvent = function(){
click.addEventListener("click", function(e){
var currentClass= this.getElementsByTagName('div')[0].className;
var divs = document.getElementsByClassName('openedBox');
for(var i = 0; i < divs.length; i++){
divs[i].setAttribute("class", "closedBox");
}
if(currentClass === "openedBox"){
this.childNodes[3].setAttribute("class", "closedBox");
} else {
this.childNodes[3].setAttribute("class", "openedBox");
}
},false);
}();
}
}();
Instead of binding several event listeners, you can also bind just one click event, and use the event.target property to check where you've clicked.
The updated code is less comples, and easier to maintain.
Demo: http://jsfiddle.net/MTJa5/28/
var hellos = function() {
function closeAllButThisBox(targ) {
var allBoxes = document.getElementsByClassName('openedBox');
for (var i=allBoxes.length-1; i>=0; i--) {
if (allBoxes[i] !== targ) {
allBoxes[i].className = 'closedBox';
}
}
}
window.addEventListener('click', function(ev) {
var targ = ev.target;
// Traverse the tree, until you hit the desired / root element
while (targ && targ !== document.documentElement) {
if (targ.className.indexOf('openedBox') !== -1) {
closeAllButThisBox(targ);
// Do nothing when clicking inside an opened box
return;
}
// This will open boxes, if closed, when clicking at the <p>
if (targ.tagName.toLowerCase() === 'p' && targ.parentNode.className.indexOf('clickToShow') !== -1) {
closeAllButThisBox(targ.parentNode);
targ.parentNode.getElementsByTagName('div')[0].className = 'openedBox';
return;
}
targ = targ.parentNode;
}
// At this point, the click is not at the right place.
// Close all boxes by removing the closedBox class names
var boxes = document.getElementsByClassName('openedBox');
for (var i=boxes.length-1; i>=0; i--) {
boxes[i].className = 'closedBox';
}
}, false);
}();