This is my website http://natjecanje.interes.hr/
and I use this code in javascript:
function swapStyleSheet(sheet){
document.getElementById('pagestyle').setAttribute('href', sheet);
and this in html:
<li>KONTRAST</li>
And that change contrast of my website, this link works when i click it, but when i change contrast i want that the same link backs me to orginal style of my website, can anybody help me with that? Thanks!!!
Try this
function swapStyleSheet(){
original = 'css/stil.css';
contrast = 'css/kontrast.css';
var source = document.getElementById('pagestyle').getAttribute('href');
if(source == original)
document.getElementById('pagestyle').setAttribute('href', contrast);
else
document.getElementById('pagestyle').setAttribute('href', original);
}
HTML
<li>KONTRAST</li>
function swapStyleSheet(sheet) {
var oldPageStyle = document.getElementById('pagestyle').getAttribute('href');
document.getElementById('pagestyle').setAttribute('href', sheet);
document.getElementById('myContrastLink').setAttribute('onclick', "swapStyleSheet('" + oldPageStyle + "')");
}
HTML:
<li>KONTRAST</li>
Store your sheets inside the function itself and check if the sheet has been swapped yet to determine what the new value will be.
function swapStyleSheet (){
var originalStyle = 'css/kontrast.css';
var newStyle = 'css/original.css'; // <- or whatever your filename is
var pagestyle = document.getElementById('pagestyle');
if (pagestyle.getAttribute('href') == newStyle) {
pagestyle.setAttribute('href', originalStyle);
}
else {
pagestyle.setAttribute('href', newStyle);
}
pagestyle.setAttribute('href', styleToUse);
}
In your html, don't pass anything into swapStyleSheet:
<li>KONTRAST</li>
function swapStyleSheet(){
original = 'css/stil.css';
contrast = 'css/kontrast.css';
var source = document.getElementById('pagestyle').getAttribute('href');
if(source == original)
document.getElementById('pagestyle').setAttribute('href', contrast);
else
document.getElementById('pagestyle').setAttribute('href', original);
}
This works for me, thank you #Think Different
And thanks everyone for their time they spend for me, you are amazing guys, i'm newbie in JS :)
If you are using Jquery You can use toggleClass function in Jquery. Rather changing the whole CSS you can change particular class and do the relevant stuff.
HTML
<li>KONTRAST</li>
Jquery
$("a.Normal").click(function() {
$(this).toggleClass( "kontrast" );
});
Related
I can't get the value from a variable by javascript and this don't appear in the code
I don't know how to search about it or to resolve this. My textbox don't alter the color, but receive the color and is not the cache.
Thinking in a better way to make my code works I have developed the function:
<script type="text/javascript">
function checkBatchQTD() {
var element = document.getElementById('<%=txtlblBatchQTD.ClientID%>');
var varValue = element.value;
if (varValue == "") {
element.style.backgroundColor = "#ffffc0";
}
else {
element.style.backgroundColor = "#ffffff";
}
}
</script>
And after do it I have searched for a way to make the function repeat and I have found the window.setInterval to make that function work with repeat:
<script>
window.setInterval(function () {
checkddlProduct();
checkBatchQTD();
checkDate();
}, 500);
</script>
I'm so sorry if I don't have formated the question or not posted the code before this, but I thank you very much for the help.
Writing the code i am stuck with one thing. I am loading variable string through jQuery load function and there is where trouble starts. I want my code to check if string loaded through text file had any changes and if that is true make some actions. How do I set my variable as a string to compare it with the one in file? Part of the code
var follow, donate;
var auto_refresh = setInterval(function() {
follow = $('#followerid').load("../Muxy/most_recent_follower.txt");
donate = $('#donatorid').load("../Muxy/most_recent_donator.txt");
}, 100);
and then I want to make something like this:
someUpdateFunction() {
if($(#'followerid').get("innerHTML") != follow)
// actions (animations, div changes etc.)
}
That is probably totally wrong but I wasnt able to find any tips here. Thanks in advance
Try something like this:
$.get('../Muxy/most_recent_follower.txt', function (data) {
var followerid = $('#followerid').html();
if( followerid == data ){
// They are the same
}else{
// They are not the same
}
});
The .html() method will get the HTML inside #followerid. It sounds like that's what you want.
The jQuery.load function doesn't return the loaded file, it returns the element. Try out this:
var auto_refresh = setInterval(function() {
oldFollow = $('#followerid').html();
$('#followerid').load("../Muxy/most_recent_follower.txt");
oldDonate = $('#donatorid').html();
$('#donatorid').load("../Muxy/most_recent_donator.txt");
}, 100);
someUpdateFunction() {
if($('#followerid').html() !== oldFollow)
// actions (animations, div changes etc.)
}
}
and really don't know much about jquery and I am already practicing, had some issue.
Question is that I have a url in the footer and I want if the url is not equal to hariskhan.com.pk then redirect it to something.com.
check my code:
$(document).ready(function(){
var check = $("a").attr('href');
var haris = "http://www.hariskhan.com.pk";
if (check == $("haris")) {
$("body").css("background", "green");
}
else {
$("body").css("background", "orange");
}
});
DOM:
<div class="footer"><a href="http://hariskhan.com.pk"/>
You are comparing a string to a jQuery object. So let's fix that first
$(document).ready(function(){
var check = $("a").attr('href');
var haris = "http://www.hariskhan.com.pk";
if (check == haris) {
...
}
});
Then you want to redirect the page
$(document).ready(function(){
var check = $("a").attr('href');
var haris = "http://www.hariskhan.com.pk";
if (check == haris) {
location.href = "//something.com";
}
else {
$("body").css("background", "orange");
}
});
well, first let's start by asking did you put the jquery code in a script tag??
did you create a proper html dom?
do you understand that you jquery code needs to select href from a tag?
you need to study html and understand a bit about how it integrates to javascripts before you start jquery
I'm trying to get a string of script to run in an href so the link will redirect users depending on an if/else statement. My code:
<div id="editredirect">
<script>
if("[#authfield:Authentications_2_Region]" == "[#field:Location_2_Region_ID]"){
window.location.href = "member-details-edit?CID=[#field:Member_Caspio_ID]&Location_ID=[#field:Member_Location_ID]";
}
else if ("[#authfield:Authentications_2_Region]") == "[#field:Location_2_B_Region_ID]"{
window.location.href = "member-details-edit?CID=[#field:Member_Caspio_ID]&Location_ID=[#field:Member_Location_ID]";
}
else {
window.location.href = "member-details?CID=[#field:Member_Caspio_ID]&Location_ID=[#field:Member_Location_ID]";
}
</script>
</div>
<style type="text/css">a.ex1:hover {color: #f18c21; text-decoration: underline;}
</style>
<a class="ex1" href="javascript:.initialize(document.getElementById("editredirect"));">Details</a>
I've tred do also do a function like this:
<script>
function editredirect {
if("[#authfield:Authentications_2_Region]" == "[#field:Location_2_Region_ID]"){
window.location.href = "member-details-edit?CID=[#field:Member_Caspio_ID]&Location_ID=[#field:Member_Location_ID]";
}
else if ("[#authfield:Authentications_2_Region]") == "[#field:Location_2_B_Region_ID]"{
window.location.href = "member-details-edit?CID=[#field:Member_Caspio_ID]&Location_ID=[#field:Member_Location_ID]";
}
else {
window.location.href = "member-details?CID=[#field:Member_Caspio_ID]&Location_ID=[#field:Member_Location_ID]";
}
}
</script>
<style type="text/css">a.ex1:hover {color: #f18c21; text-decoration: underline;}
</style>
<a class="ex1" href="javascript:editredirect">Details</a>
Neither one will work. The first string returns a syntax error, the second tells me that "editredirect" is undefined.
Thank you!
EDIT
Praveen Kumar's suggestions were the best. The developer for the database I am using was able to get the application to do it without having to insert any script. However, they did say that the event listener would have also worked once I had my parameters correct.
You can use onclick and add the whole JavaScript logic:
Click me?
The best way is to use event listener like this:
document.getElementsByTagName("a")[0].addEventListener("click", function () {
a = prompt('What\'s your name?');
if (a !== null)
alert('Welcome, ' + a);
else
alert('Bye Bye!');
return false;
}, false);
Click me?
This is better than using href. If you still want to run it in href, you need to create a function and run:
function aha() {
a = prompt('What\'s your name?');
if (a !== null)
alert('Welcome, ' + a);
else
alert('Bye Bye!');
return false;
}
Click me?
Note: In your code, you have used wrong notation. That's a syntax error. JavaScript functions have to be declared in a specific way. Follow that!
I've spent the last few hours trying to find the answer to this, but nothing seems to work...
I need to execute a piece of code when a div (or anything inside of it; including iframe content) is clicked. The following code should do it (when added into the div tag), but it doesn't seem to work.
onclick="if(typeof(_vis_opt_top_initialize) =='function'){ _vis_opt_goal_conversion(200); _vis_opt_pause(500);}"
The purpose is to execute a custom conversion goal:
<script type="text/javascript">
if(typeof(_vis_opt_top_initialize) == "function") {
_vis_opt_goal_conversion(200);
}
</script>
Any help will be greatly appreciated :)
I hate using inline js... hate it...
If you need to account for IE (<8), then you can't use addEventListener, so you can do something like this:
function bindListener(el,eventName,eventHandler) {
if (el.addEventListener) { // Anything but IE <8
el.addEventListener(eventName,eventHandler,false);
} else if (el.attachEvent) { // For IE <8
el.attachEvent('on'+eventName,eventHandler);
}
}
Then you can call it using something like this:
var ele = document.getElementById('idOfElement');
bindListener(ele, 'click', functionToCall);
Try using addEventListener. Link here. The Example on that page is exactly what you are asking for.
First give your div a unique ID
<div id="yourDivID"></div>
then set the onclick function in window.onload
var yourDiv = document.getElementById("yourDivID");
yourDiv.onclick = function() {
if(typeof(_vis_opt_top_initialize) == "function") {
_vis_opt_goal_conversion(200);
}
}
}
I write simple example for you:(j Query answer)
Html Code
<div class="test">Click</div>
JavaScript Code
$('div.test').click(function(){
alert("some");
});
Demo
Edited
JavaScript example
<html >
<script type="text/javascript">
function AttachAllDivEvents()
{
var divCollection = document.getElementsByTagName("div");
for (var i=0; i<divCollection.length; i++)
{
AttachDivClickEvent(divCollection[i]);
}
}
function AttachDivClickEvent(divObj)
{
divObj.onclick = function()
{
document.getElementById("count").innerHTML = parseInt(document.getElementById("count").innerHTML) + 1;
};
}
window.onload = AttachAllDivEvents;
</script>
<body>
<div>click</div>
<p id="count" style="font:bold 20px Times;color:red;text-indent:20px">1</p>
</body>
</html>