I have a grid with an template column and in that column I have text and icon,
on icon mousehover (on mode) and mousehoverout (off mode) I am changing the icon.
Now when the user click on icon it opens a popup and the icon must be in "On" mode but if the user without closing clicks another row's icon then previous must be in off and current should be in on mode.
So for that I have written this:
<DataItemTemplate>
<div class="floatLeft titleBlock">
<a href="<%# Eval("Link") %>" class="ellipsesTooltip"><span>
<%# Container.Text%></span><%# Container.Text%></a></div>
<div class="floatRight">
<a onclick="GridValueCatcherMoreLike(this, '<%# Eval("ResearchNoteId").ToString()%>');">
<img alt="+/- 30 days matching Author, Industry, Theme" src="../Image/Research/MoreByOff.gif" onClick="check(this,'../Image/Research/MoreByOn.gif', '../Image/Research/MoreByOn.gif');"
onmouseover="ToggleAuthorMoreLikeImage(this, 'MoreLikePopUp', '../Image/Research/MoreByOn.gif', '../Image/Research/MoreByOff.gif');"
onmouseout="ToggleAuthorMoreLikeImage(this, 'MoreLikePopUp', '../Image/Research/MoreByOff.gif', '../Image/Research/MoreByOff.gif');" />
</a>
</div>
function check(sender, onImg, offImg) {
debugger;
for(var i=0;i<activeImgList.length;i++)
{
if(sender!=activeImgList[i])
activeImgList[i].scr = offImage;
else
activeImgList[i].scr = onImg;
}
return true;
}
function ToggleAuthorMoreLikeImage(sender, popupname, imageurl, offImageurl)
{
var win = ResearchPopup.GetWindowByName(popupname);
if (!ResearchPopup.IsWindowVisible(win))
{
sender.src=imageurl;
activeImgList[arrayIndex]=sender;
arrayIndex = arrayIndex + 1;
}
else
{
activeImgList[arrayIndex] = sender;
arrayIndex = arrayIndex + 1;
return;
}
}
Why not take a step back and use something like jQuery.toggleClass() or jQuery.hover() on the client side?
.hover()
<!DOCTYPE html>
<html>
<head>
<style>
ul { margin-left:20px; color:blue; }
li { cursor:default; }
span { color:red; }
</style>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<ul>
<li>Milk</li>
<li>Bread</li>
<li class='fade'>Chips</li>
<li class='fade'>Socks</li>
</ul>
<script>
$("li").hover(
function () {
$(this).append($("<span> ***</span>"));
},
function () {
$(this).find("span:last").remove();
}
);
//li with fade class
$("li.fade").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);});
</script>
</body>
</html>
.toggleClass()
<!DOCTYPE html>
<html>
<head>
<style>
p { margin: 4px; font-size:16px; font-weight:bolder;
cursor:pointer; }
.blue { color:blue; }
.highlight { background:yellow; }
</style>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<p class="blue">Click to toggle</p>
<p class="blue highlight">highlight</p>
<p class="blue">on these</p>
<p class="blue">paragraphs</p>
<script>
$("p").click(function () {
$(this).toggleClass("highlight");
});
</script>
</body>
</html>
Related
I'm trying to load a navigation bar from an external HTML file, and automatically set an anchor's tag class to "active" based on the current page.
Here's the code:
<html>
<head>
<title>Main</title>
<style>
.active {
background-color: green;
}
</style>
<script>
$(document).ready(loadAndSet());
function loadAndSet() {
loadBar();
setActive();
}
function loadBar() {
$('#bar').load('navigation.html');
}
function setActive() {
var aObjects = document.getElementById("bar").getElementsByTagName("a");
for (var i = 0; i < aObjects.length; i++) {
if (document.location.href.indexOf(aObjects[i].href) >= 0) {
aObjects[i].className = "active";
}
}
}
</script>
</head>
<body>
<div id="bar"></div>
<h1>Content Title</h1>
<p>Some content</p>
</body>
</html>
And here's navigation.html:
<ul>
<li>Home</li>
<li>Page 2</li>
</ul>
What am I doing wrong?
EDIT:
New code:
<html>
<head>
<title>Main</title>
<style>
.active {
background-color: green;
}
</style>
<script>
$(document).ready(loadBar());
function loadBar() {
$('#bar').load('navigation.html', setActive);
}
function setActive() {
$("#home").addClass("active");
}
</script>
</head>
<body>
<div id="bar"></div>
<h1>Content Title</h1>
<p>Some content</p>
</body>
</html>
And navigation.html:
<ul>
<li><a id="home" href="index.html">Home</a></li>
<li><a id="page2" href="page2.html">Page 2</a></li>
</ul>
The navigation bar doesn't even load...
Your navigation.html code is missing the closing ul-Tag: change the last <ul> to </ul>.
The second problem is a little bit more difficulty. The page index.html can have multiple different values in document.location.href!
It can be:
http://www.stackoverflow.com/index.html
or
http://www.stackoverflow.com/
or even
http://www.stackoverflow.com
Your code wouldn't work for the last two versions of the url.
The third problem is, that the load() function can take a few seconds, so that the code isn't loaded at the time your setActive() is executed. You have to wait until load is finished. You can achieve this by using a callback function:
$(document).ready(loadBar());
function loadBar() {
$('#bar').load('navigation.html', setActive);
}
function setActive() {
var aObjects = document.getElementById("bar").getElementsByTagName("a");
for (var i = 0; i < aObjects.length; i++) {
if (document.location.href.indexOf(aObjects[i].href) >= 0) {
aObjects[i].className = "active";
}
}
}
You can give every link an unique id and then use this little javascript at the end of every site.
<script type="text/javascript">
$(document).ready( function(){
$("#IFOFYOURLINK").addClass("active");
});
</script>
EDIT:
Try to use
function loadBar() {
$('#bar').load("navigation.html", setActive);
}
This is inside my CSS:
div.hide {
display:none;
}
div.show {
color: #66CCFF;
}
This is in my HTML:
16:10
<script language="JavaScript">
function showText(show,hide)
{
document.getElementById(show).className = "show";
document.getElementById(hide).className = "hide";
}
</script>
<a name="16:10" onclick="showText('text1')" href="javascript:void(0);"></a>
<div id="text1" class="hide">This is your monitors aspect ratio.</div>
I'm trying to make the first link display the "This is your monitors aspect ratio." text lower on the page.
Any help is much appreciated.
Pure CSS Answer
Ok, if you just want to append text after you have moved to a position in a page using an anchor tag, you could do it with nothing but CSS similar to the following:
a:target:after{
content: " Test";
background-color: #ccffcc;
}
What this does is appends the text "Test" after the active anchor and colors. Here is an example page with implementation:
<!DOCTYPE html>
<html>
<head>
<title>Link Printer 2</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style>
a:target:after{
content: " Test";
background-color: #ccffcc;
}
.bigSection{
height: 200px;
}
</style>
</head>
<body>
<div class="bigSection">
<div><a name="first">First</a></div>
<div>To First</div>
<div>To Second</div>
<div>To Third</div>
</div>
<div class="bigSection">
<div><a name="second">Second</a></div>
<div>To First</div>
<div>To Second</div>
<div>To Third</div>
</div>
<div class="bigSection">
<div><a name="third">Third</a></div>
<div>To First</div>
<div>To Second</div>
<div>To Third</div>
</div>
</body>
</html>
Answer using JavaScript
You need to bind an eventListener and prevent it from moving to the next page. Here is a way to do it with JavaScript or CSS. The JavaScript way will actually set the text to whatever you want. The CSS way will hide actually hide the element.
<!DOCTYPE html>
<html>
<head>
<title>Link Printer</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style>
.hide{
display: none;
}
</style>
<script>
function jsShowText(event) {
var divToManip = document.getElementById("text");
if (divToManip.innerHTML === "") {
divToManip.innerHTML = "Hello";
}
else {
divToManip.innerHTML = "";
}
event.preventDefault();
}
function cssShowText(event) {
var divToManip = document.getElementById("text");
if (divToManip.className === "") {
divToManip.className = "hide";
}
else {
divToManip.className = "";
}
event.preventDefault();
}
function setListeners() {
document.getElementById("jsPrinter").addEventListener("click", jsShowText, false);
document.getElementById("cssPrinter").addEventListener("click", cssShowText, false);
}
window.onload = setListeners;
</script>
</head>
<body>
<div><a id="jsPrinter" href="" onclick="showText();">Click With JavaScript</a></div>
<div><a id="cssPrinter" href="" onclick="showText();">Click With CSS</a></div>
<div id="text">I'm text</div>
</body>
</html>
"showText" must receive an id parameter to be used with the call to "document.getElementById"
Try this, just 1 link that will display the text below after click:
<a name="16:10" onclick="showText('text1')" href="javascript:void(0);">16:10</a>
<script language="JavaScript">
function showText(id)
{
document.getElementById(id).style.display = "block";
}
</script>
<div id="text1" style="display:none;">This is your monitors aspect ratio.</div>
I'm just using style display to hide/show the element. Hope it helps.
just change your css like this:
div.show {
display:block;
color: #66CCFF;
}
Here I am going to provide an example with something that I was working, thank you Alberto Montellano for the example, that gave me an idea, however what was required at the end was something a little different, with the option not to show the data and display it only when I click and make it disappear when click again. In this example I am going to give you two options; you can have a button or a link to trigger the JS function to display and hide the body text, you can choose if you want the button or link that is way I put a comment (optional), both behave as the same, it is up to you which one you want to use.
<!DOCTYPE html>
<html>
<head>
<!-- CSS -->
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top:20px;
}
</style>
</head>
<body>
<!-- text before the button or link -->
<p>Click the "PIN" button (or link) to display PIN options:</p>
<!-- The Pin button (optional) -->
<button type="button" onclick="myFunction()">PIN button:</button>
<!-- The Pin link (optional) -->
</br></br></br>
<a onclick="myFunction()" href="javascript:void(0);">PIN link:</a>
<!--Data will display or hide (toggle)-->
<div id="myDIV"style="display:none;">
These are the steps to get your PIN number: Bla bla bla.
</div>
<p><b>Note:</b> The text display when you click the button or link will take space, if you click again will be toggle.</p>
<!-- JS -->
<script>
function myFunction() {
var x = document.getElementById('myDIV');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
</body>
</html>
The following drag and drop JavaScript works in Firefox, but not in IE:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>t</title>
<style type="text/css">
.mover {
width:60px; height:4em; line-height:4em; margin:10px; padding:5px;
float:left; background:#ffff99; border:1px dotted #333333; text-align:center;
}
</style>
<script type="text/javascript">
function dragWord(dragEvent) {
dragEvent.dataTransfer.setData("text/html", dragEvent.target.textContent + "|" + dragEvent.target.parentNode.id);
}
function dropWord(dropEvent) {
var dropData = dropEvent.dataTransfer.getData("text/html"); var dropItems = dropData.split("|");
var prevElem = document.getElementById(dropItems[1]);
prevElem.getElementsByTagName("div")[0].textContent = dropEvent.target.textContent;
dropEvent.target.textContent = dropItems[0]; dropEvent.preventDefault();
}
</script>
</head>
<body>
<div><em>Move the words around to make a sentence.</em></div>
<form>
<div id="box1" ondragover="event.preventDefault()" ondrop="dropWord(event)">
<a href="#" class="mover" draggable="true" ondragstart="dragWord(event)" >page</a>
</div>
</form>
</html>
Does anyone have any clues as to why this does not work in IE? The problem is in the drag and drop function. I tried to replace the div with a href=# but that does not work.
I have this code for toggling class using pure JavaScript that I found online and it is not working when I am using it in an offline website
my code is -
<!DOCTYPE html>
<html>
<head>
<script>
function classToggle() {
this.classList.toggle('class1');
this.classList.toggle('class2');
}
document.querySelector('#div').addEventListener('click', classToggle);
</script>
<style type="text/css">
.class1 {
color: #f00;
}
.class2 {
color: #00f;
}
</style>
</head>
<body>
<div id="div" class="class1">click here</div>
</body>
</html>
any help would be appreciated
Move the script below the div you are looking for in the source code.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.class1 {
color: #f00;
}
.class2 {
color: #00f;
}
</style>
</head>
<body>
<div id="div" class="class1">click here</div>
<script>
function classToggle() {
this.classList.toggle('class1');
this.classList.toggle('class2');
}
document.querySelector('#div').addEventListener('click', classToggle);
</script>
</body>
</html>
You cannot manipulate the dom before it is ready.
So either load the script that adds the handler at the end of the body tag, or use the DOMContentLoaded event.
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM fully loaded and parsed");
});
Try adding the event handler after the div has rendered - for example in the onload event
Live Demo
<!DOCTYPE html>
<html>
<head>
<script>
function classToggle() {
if (!this.classList) return; // no support
this.classList.toggle('class1');
this.classList.toggle('class2');
}
window.onload=function() {
document.getElementById('div').onclick=classToggle;
}
</script>
<style type="text/css">
.class1 {
color: #f00;
}
.class2 {
color: #00f;
}
</style>
</head>
<body>
<div id="div" class="class1">click here</div>
</body>
</html>
codepen demo
//vanilla js -- toggle active class
// el = object containing the elements to toggle active class and the parent element
var el = {
one: document.getElementById('one'),
two: document.getElementById('two'),
three: document.getElementById('three'),
hold: document.getElementById('hold')
};
// func = object containing the logic
var func = {
toggleActive: function(ele) {
ele = event.target;
var hold = el.hold.children;
var huh = el.hold.children.length;
var hasActive = ele.classList.contains('active');
for (i = 0; i < huh; i++) {
if (hold[i].classList.contains('active')) {
hold[i].classList.remove('active');
}
}
if (!hasActive) {
ele.classList.add('active');
}
}
};
//add listeners when the window loads
window.onload = function() {
var holdLen = el.hold.children.length;
for (i = 0; i < holdLen; i++) {
el.hold.children[i].addEventListener("click", func.toggleActive);
}
};
I have this code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style type="text/css">
.kat1 {
background-image:url(ikoniceKategorije/07.jpg);
width:30px;
height:30px;
float:left;
}
.kat1:hover {
background-image:url(ikoniceKategorije/07h.jpg);
}
// here I have a code for .kat2,kat2 ... styles
#div {
width:220px;
height:30px;
overflow:hidden;
}
</style>
<script>
$(function() {
$('#div div').click(function() {
var elem = $(this);
var style = elem.css('background-image');
if(/h\.jpg/.test(style)) {
elem.css('background-image', style.replace(/h\.jpg/, '.jpg'));
} else {
elem.css('background-image', style.replace(/\.jpg/, 'h.jpg'));
}
});
});
</script>
</head>
<body>
<div id="div">
<div class="kat1 changing"></div>
<div class="kat2 changing"></div>
<div class="kat3 changing"></div>
<div class="kat4 changing"></div>
<div class="kat5 changing"></div>
<div class="kat6 changing"></div>
<div class="kat7 changing"></div>
</div>
</body>
</html>
I have a problem - when I click once div change bacground color but when I click second time on same icon then I cant change div background...
demo www.pluspon.com/kategorije.html
Why do you want to have this functionality in JavaScript? An other option would be to use CSS classes to simplify the process:
$(function() {
$('#div div').click(function() {
$(this).toggleClass('active');
});
});
CSS:
.kat1 {
background-image:url(ikoniceKategorije/07.jpg);
width:30px;
height:30px;
float:left;
}
.kat1:hover,
.kat1.active {
background-image:url(ikoniceKategorije/07h.jpg);
}