I'm trying to change the class name for a tab when I click it. I also want it to change back to the original one when I click a different tab.
I setup a very basic webpage just for testing. The full code of the page is copied below. Right now, this isn't working as it should, even though similar code was tested in JSfiddle and did work there. Note that the design part is showing up fine. Here are the two css rules that are part of this and the code for the full page follows:
.member_nav { float:left; margin-right:1px;height:65px;text-align:center;background-color:#636464;padding:0 20px 0 20px;font-size:15px;font-weight:bold;color:#fff;line-height:60px;}
.member_nav_clicked { float:left; margin-right:1px;height:65px;text-align:center;background-color:#0099cc;padding:0 10px 0 10px;font-size:15px;font-weight:bold;color:#fff;line-height:60px;}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Nav</title>
<link href="css_new/style.css" media="screen" rel="stylesheet" type="text/css">
<script type="text/javascript">
$(document).ready(function() {
$('.member_nav').on('click', function() {
$(this).addClass('member_nav_clicked').siblings().removeClass('member_nav_clicked');
});
});
</script>
</head>
<body>
<div class="member_nav">
Nav 2
</div>
<div class="member_nav">
Nav 3
</div>
<div class="member_nav">
nav 4
</div>
<div class="member_nav">
Nav 5
</div>
</body>
</html>
Here is the code I found that was causing everything to not work on the real site. This was in the head right below the jQuery call:
<script type="text/javascript">
var popup_jq = jQuery.noConflict();
popup_jq(document).ready(function() {
popup_jq("#various1").fancybox({
'titlePosition' : 'inside',
'transitionIn' : 'none',
'transitionOut' : 'none',
'showCloseButton' : true
});
});
</script>
Related
I'm using textillate.js to add animation to text. My html page looks like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Textillate</title>
<link rel="stylesheet" href="animate.min.css">
<script src="jquery-3.5.1.min.js"></script>
<script src="jquery.lettering.js"></script>
<script src="jquery.textillate.js"></script>
</head>
<body>
<div class="tlt">
Hello world
</div>
<script>
$('.tlt').textillate({ in: { effect: 'bounceInDown' } });
</script>
</body>
</html>
where the included scripts and css are taken from the following links:
https://raw.githubusercontent.com/jschr/textillate/master/jquery.textillate.js
https://code.jquery.com/jquery-3.5.1.min.js
https://raw.githubusercontent.com/davatron5000/Lettering.js/master/jquery.lettering.js
https://raw.githubusercontent.com/animate-css/animate.css/master/animate.min.css
The problem is that whatever I set as effect in the in object, the result is always the default textillate animation: the chars appear one after the other from left to right, and I can control the order of the appearing letters (e.g. setting shuffle: true, etc..), but not the animation type.
This is pretty much the example code that textillate offers on his github page, so I don't have any idea on where is the problem.
I think the problem is related to animate.css reference, i change it and it works. Hope it helps.
$('.tlt').textillate({ in: { effect: 'flipInY' } });
$('.tlt2').textillate({ in: { effect: 'rollIn' } });
$('.tlt3').textillate({"loop":true,"in":{"effect":"fadeInDownBig","shuffle":false,"reverse":false,"sync":false},"out":{"effect":"hinge","shuffle":true,"reverse":false,"sync":false}});
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.compat.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.6.1/jquery.lettering.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/textillate/0.4.0/jquery.textillate.js"></script>
<div class="tlt">
Hello world
</div>
<div class="tlt2" >
Hello world
</div>
<div class="tlt3" >
Hello world
</div>
This question already has answers here:
Scroll to the top of the page using JavaScript?
(49 answers)
Closed 6 years ago.
I want to have a button, and when you click on it, it will get you (the visitor) to the top of the page.
How can this be done?
Thanks
If you have a keyboard attached:
Press the 'Home' button.
The classic operation of hyperlinks is to point to a page different from the one being viewed, to navigate the site. It is also possible to create a link to a specific location on the current page, or to another page in order to position the browser correctly.
Creating an anchor is easy: you just have to assign the element to which you want to be able to point an identifier (with the attribute HTML id) and to associate a link starting with the character #, followed by the name of this Identifier.
Ex:
<div id="top">...</div>
It is then enough to make a link to this anchor:
top of page
Demo:
<!DOCTYPE html>
<html>
<head>
<title>top link</title>
<meta charset="UTF-8">
</head>
<body>
<div id="top">...</div>
<!-- Content -->
<!-- Content -->
<!-- Content -->
top of page
</body>
</html>
On button click, run the Javascript:
window.scrollTo(0, 0);
You can do it like this :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Back To Top Button by CodexWorld</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script type='text/javascript'>
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('#scroll').fadeIn();
} else {
$('#scroll').fadeOut();
}
});
$('#scroll').click(function(){
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
});
});
</script>
<style type="text/css">
/* BackToTop button css */
#scroll {
position:fixed;
right:10px;
bottom:10px;
cursor:pointer;
width:50px;
height:50px;
background-color:#3498db;
text-indent:-9999px;
display:none;
-webkit-border-radius:60px;
-moz-border-radius:60px;
border-radius:60px
}
#scroll span {
position:absolute;
top:50%;
left:50%;
margin-left:-8px;
margin-top:-12px;
height:0;
width:0;
border:8px solid transparent;
border-bottom-color:#ffffff
}
#scroll:hover {
background-color:#e74c3c;
opacity:1;filter:"alpha(opacity=100)";
-ms-filter:"alpha(opacity=100)";
}
</style>
</head>
<body>
<!-- BackToTop Button -->
Top<span></span>
<!-- ++++++++++++ Page Content Goes Here ++++++++++++ -->
</body>
</html>
Just Copy & Paste the script and run
For a link:
Back to top
With button:
<a href="#">
<button>Back to top</button>
</a>
See also:
How to create an HTML button that acts like a link?
HTML Anchors with 'name' or 'id'?
I have a button on my web page. once I click on the button a pop-up will appear with some text. here I need to display another HTML page in that pop-up
I have given my code below please help me
<!doctype html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500">
<link type="text/css" rel="stylesheet" href="popModal.css">
</head>
<body>
<button id="notifyModal_ex1" class="btn btn-primary">Example</button>
<div id="content2" style="display:none">
ghjgh
</div>
<script src="popModal.js"></script>
<script>
$(function(){
$('#notifyModal_ex1').click(function(){
$('#content2').notifyModal({
duration : 1500,
placement : 'center',
overlay : true,
type : 'notify',
onClose : function() {}
});
});
});
</script>
</body>
</html>
Try using jQuery's load():
$('#content2').load("page/url").notifyModal()
To show a loading message:
$('#content2').text("Loading, please wait...").load("page/url").notifyModal()
Or to open the modal when load ends:
$('#content2').load("page/url", function() {
$('#content2').notifyModal();
})
As described in load() docs:
Load data from the server and place the returned HTML into the matched element.
So it will load an html response and append it to the target element.
I would like to change the colour of an element (in this example a 100px x 100px square called "block" from transparent to black when the variable trigger= 1. The code listed below works with a button. I have other javascript (that this code will be incorporated into that does work with trigger.
Any help would be appreciated.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/colourswap.css">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="_js/jquery.color.js"></script>
</head>
<body>
<div id="block">Hello!</div>
<!--button id="go">Simple</button-->
<script>
var trigger = 1;
(function(){
if (trigger == 1) {
jQuery("#block").animate({
backgroundColor: "#000"
}, 1500 );
};
});
</script>
</body>
</html>
You can actually just use .show() or .toggle() if the block is transparent otherwise, e.g.
//say if you wanted the block to show when button is clicked
$("#go").click(function(){
$("#block").toggle();
});
And then set the block's colour to black by default.
I am using Cufon and I have my navigation and all of my content is on one page and it is scrolling via anchor tag to that section of the page, yet the navigation stays visible I want when you click a link that link will light up:
Here is what I have so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="cufon-yui.js" type="text/javascript"></script>
<script src="Veneer_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1 a', {
hover: true
});
</script>
<style type="text/css">
h1 a.selected {
color: red;
}
</style>
</head>
<body>
<div class="home-link"><h1><a class="selected" href="#home">Home</a></h1></div>
<div class="hiw-link"><h1><a class="" href="#howitworks">How It Works</a></h1></div>
<div class="faq-link"><h1><a class="" href="#faq">Faq</a></h1></div>
<div class="prize-link"><h1><a class="" href="#prizes">Prizes</a></h1></div>
<div class="media-link"><h1><a class="" href="#media">Media</a></h1></div>
<div class="rules-link"><h1><a class="" href="#rules">Rules</a></h1></div>
<script type="text/javascript">
$('#home-link','#hiw-link','#faq-link','#prize-link','#media-link','#rules-link').toggleClass(selected, addOrRemove);
</script>
</body>
</html>
So basically as you see I am just trying to add the class of selected to the anchor tag and remove it from everything else so only that link is red. Help is greatly appreciated.
jsBin demo
$('div[class$=link] h1 a').click(function(e){
e.preventDefault();
$('div[class$=link] h1 a').removeClass('selected');
$(this).addClass('selected');
Cufon.refresh(); // Will refresh all `Cufon` text
});
Since you are using Cufon text so you need to call Cufon.refresh(); after you change any class to Cufon text, otherwise it won't take effect.
$('div[class$=link] h1 a').click(function(e){
e.preventDefault();
$('div[class$=link] h1 a').removeClass('selected');
$(this).addClass('selected');
Cufon.refresh(); // Will refresh all `Cufon` text
});
You are using the ID selectors, instead you should be using the class selectors (since you have home-link etc assigned to class attribute and not id attribute of the div elements)
Try this:
var selected = "selected"; //Assuming you are storing it in a variable
$(function(){
var allLinks = $('.home-link,.hiw-link,.faq-link,.prize-link,.media-link,.rules-link');
allLinks.click(function(e){
allLinks.find("h1 > a").removeClass(selected);
$(this).find("h1 > a").addClass(selected);
});
});
JsFiddle: http://jsfiddle.net/JsNBt/1/