I am trying to get a different div to show for chrome and firefox. I can not get even the div to show up let alone change with each browser. Any help would be greatly appreciated. Thank you very much and have a great day.
console.log($.browser.name)
if($.browser.name == "chrome")
document.getElementById("chrome").style.display = "block";
else if($.browser.name == "mozilla")
document.getElementById("firefox").style.display = "block";
else
document.getElementById("other").style.display = "block";
#firefox, #chrome, #other {
display: none;
}
#chrome {
background-color: #8dc63f;
border: 2px solid #ffffff;
border-radius:5px;
box-shadow: none;
color: #ffffff;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 400;
line-height: 25px;
padding: .7rem 2.5rem;
margin-left: 18px;
text-align: center;
text-decoration: none;
transition: 350ms ease all;
-webkit-transition: 350ms ease all;
}
#firefox {
background-color: #8dc63f;
border: 2px solid #ffffff;
border-radius:5px;
box-shadow: none;
color: #ffffff;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 400;
line-height: 25px;
padding: .7rem 2.5rem;
margin-left: 18px;
text-align: center;
text-decoration: none;
transition: 350ms ease all;
-webkit-transition: 350ms ease all;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="firefox">
Yes, lets do it
</div>
<div id="chrome">
Yes, lets do it
</div>
You can try to use something simple as this. I guess that you don't need jQuery, we can use agent string to compare it, see test below
var tst = navigator.userAgent.toLocaleLowerCase().indexOf('chrome') ;
var chr = document.querySelector('.chrome') ;
var fox = document.querySelector('.firefox') ;
( tst > 0 ) ? chr.classList.add('sh') : fox.classList.add('sh')
div{ display: none }
div.sh{ display: block }
<div class="chrome">I'm shown on Chrome</div>
<div class="firefox">I'm shown on Firefox</div>
Related
I wrote the script code.
I want to have a fade effect on the script.
How can I add a fade effect to this code?
please help..!
※I used a translator because I couldn't speak English. That is why my words may not be natural. Please understand.
const toggleBtn = document.querySelector('.btn');
const activeOn = document.querySelector('#wrap');
toggleBtn.addEventListener('click', () => {
activeOn.classList.toggle('active');
});
a {
color: black;
text-decoration: none;
}
.btn {
display: inline-block;
font-size: 20px;
font-weight: 600;
}
#wrap {
position: relative;
display: none;
}
#wrap.active {
display: block;
}
.contents {
position: relative;
display: inline-block;
margin: 15px;
padding: 30px;
border: 1px solid #555;
}
<a class="btn" href="#none">Click</a>
<div id="wrap">
<div class="contents">
Active Contents!
</div>
</div>
The best way to do the fade effect is using CSS transition.
One thing to note is CSS transitions don't work if you're toggling display: block and display: none, so you need to instead consider using visibility or opacity attributes.
Here's the working code:
const toggleBtn = document.querySelector('.btn');
const activeOn = document.querySelector('#wrap');
toggleBtn.addEventListener('click', () => {
activeOn.classList.toggle('active');
});
a {
color: black;
text-decoration: none;
}
.btn {
display: inline-block;
font-size: 20px;
font-weight: 600;
}
#wrap {
position: relative;
opacity: 0;
transition: opacity 0.5s linear;
height: 0; /* add this if you want it to take no space */
}
#wrap.active {
opacity: 1;
}
.contents {
position: relative;
display: inline-block;
margin: 15px;
padding: 30px;
border: 1px solid #555;
}
<a class="btn" href="#none">Click</a>
<div id="wrap">
<div class="contents">
Active Contents!
</div>
</div>
You can achieve this with opacity instead of display, like this:
const toggleBtn = document.querySelector('.btn');
const activeOn = document.querySelector('#wrap');
toggleBtn.addEventListener('click', () => {
activeOn.classList.toggle('active');
});
a {
color: black;
text-decoration: none;
}
.btn {
display: inline-block;
font-size: 20px;
font-weight: 600;
}
#wrap {
position: relative;
opacity: 0;
transition: opacity 1s;
}
#wrap.active {
opacity: 1;
transition: opacity 1s;
}
.contents {
position: relative;
display: inline-block;
margin: 15px;
padding: 30px;
border: 1px solid #555;
}
<a class="btn" href="#none">Click</a>
<div id="wrap">
<div class="contents">
Active Contents!
</div>
</div>
I am roughly new to Vue and Javascript. I have two buttons that should change background colours when clicked. I have added some Javascript code to make them toggle but the issue is that when the Free button is selected the background changes, but when the Paid button is selected it won't change.
If someone could help it would be much appreciated.
function changeType(type) {
var element = document.getElementById("myDIV");
element.classList.toggle("active");
}
Below is the Codepen for what I am trying to do.
https://codepen.io/Aadil_Hafesji/pen/bxZWLg
Many thanks!!!
Edit: Changed function changeType to toggle between two buttons. Also added class button to buttons.
You should pass event parameter to the function and toggle class of event.target.
<button class="buttonCloserGreen button" onclick="changeType(event)">
Free
</button>
<button class="buttonCloserBlue button" onclick="changeType(event)">
Paid
</button>
Then access target element in changeType:
function changeType(e) {
let btns = document.getElementsByClassName('button')
for(let i = 0; i < btns.length; i++) {
btns[i].classList.remove("active")
}
e.target.classList.toggle("active");
}
Demo
You can do like below :
<button class="buttonCloserGreen" onclick="changeType(0)" id="myDIV0">
Free
</button>
<button class="buttonCloserBlue" onclick="changeType(1)" id="myDIV1">
Paid
</button>
In jquery :
function changeType(type) {
var element = document.getElementById("myDIV"+type);
element.classList.toggle("active");
}
I've passed the complete element, so you have not to use the ID/Class.
function changeType(element) {
element.classList.toggle("active");
}
.buttonCloserGreen{
height: 45px;
min-width: 200px;
margin-bottom: 10px;
border: 2px solid #53DD6C;
border-radius: 8px;
background-color: #ffffff;
box-shadow: 4px 4px 20px 0 rgba(35, 31, 32, .05);
transition: opacity 200ms ease;
transition: transform 200ms cubic-bezier(.175, .885, .32, 1.275), opacity 200ms ease;
font-family: Poppins;
color: #53DD6C;
font-size: 14px;
line-height: 40px;
font-weight: 700;
text-align: center;
letter-spacing: 0.5px;
text-transform: uppercase;
cursor: pointer;
outline: none;
}
.buttonCloserBlue{
height: 45px;
min-width: 200px;
margin-bottom: 10px;
border: 2px solid #0491F2;
border-radius: 8px;
background-color: #ffffff;
box-shadow: 4px 4px 20px 0 rgba(35, 31, 32, .05);
transition: opacity 200ms ease;
transition: transform 200ms cubic-bezier(.175, .885, .32, 1.275), opacity 200ms ease;
font-family: Poppins;
color: #0491F2;
font-size: 14px;
line-height: 40px;
font-weight: 700;
text-align: center;
letter-spacing: 0.5px;
text-transform: uppercase;
cursor: pointer;
outline: none;
}
.active{
background-color: black;
}
<button class="buttonCloserGreen" onclick="changeType(this)" id="myDIV">
Free
</button>
<button class="buttonCloserBlue" onclick="changeType(this)" id="myDIV">
Paid
</button>
I'm setting JavaScript class to the p, so it should change a colour when it's clicked, here is <p> element:
<p class="classItem"></p>
Here is classItem css class:
.classItem {
display: block;
width: 90%;
margin: 5px auto 0 auto;
height: 40px;
text-align: center;
color: #fff;
background-color: #3266cc;
border-radius: 2px;
line-height: 40px;
font-size: 14px;
transition: all 0.3s ease-in-out;
box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
cursor: pointer;
font-family: Roboto, sans-serif;
}
And there you can see background color(#3266cc) - blue, I want to change it to red on a click, so I created css class
.activeClassItem {
background-color: red!important;
}
And on javascript I said, when I click this item let's apply also activeClassItem class, so it will set a colour of background to red, and class is really applied but colour is not changed:
$("body").on("click", ".classItem", function () {
$(".activeClassItem").removeClass("activeClassItem");
$(this).addClass("activeClassItem");
});
When I inspect window, class is there:
<p class="classItem activeClassItem"></p>
So guys, even if Class is applied I can not see changed background unfortunatelly...
Any kind of help is awesome,
Thanks
Here is a working example , if still the issue persist , please consider testing with another browser or try to update your browser
$("body").on("click", ".classItem", function () {
$(".activeClassItem").removeClass("activeClassItem");
$(this).addClass("activeClassItem");
});
.classItem {
display: block;
width: 90%;
margin: 5px auto 0 auto;
height: 40px;
text-align: center;
color: #fff;
background-color: #3266cc;
border-radius: 2px;
line-height: 40px;
font-size: 14px;
transition: all 0.3s ease-in-out;
box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
cursor: pointer;
font-family: Roboto, sans-serif;
}
.activeClassItem{
background-color:red !important
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<p class="classItem"></p>
</body>
I have this code to embed on my site from Setmore to allow appointment booking on the website, this opens a popup in the website like you would expect on a hotel booking website.
<script id="setmore_script" type="text/javascript" src="https://my.setmore.com/js/iframe/setmore_iframe.js"></script><a id="Setmore_button_iframe" style="float:none" href="https://my.setmore.com/bookingpage/c6461561-7478-43ef-97ee-d4e8d6c89436"><img border="none" src="https://my.setmore.com/images/bookappt/SetMore-book-button.png" alt="Book an appointment with HouseKeep using SetMore" /></a>
This uses a really boring button so I made a custom one in photoshop to replace. However, I wanted to make one in CSS so that it changes when the user hovers over it.
<Center>
<button class="button button1">BOOK NOW</button>
</Center>
<style>
.button {
background-color: #2f896b; /* Green */
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
background-color: white;
color: black;
border: 2px solid #2f896b;
}
.button1:hover {
background-color: #2f896b;
color: white;
</style>
I Would like to make it so that I can use the button that I've made but it still has the exact same functionality as the image being there in the original code to code to embed. Any ideas?
By Adding this below CSS you can easily override the Setmore button.
This Below CSS will help you to do following changes
Text of Setmore button
Add Hover Effect
Change Button Style
a#Setmore_button_iframe
{
position: relative;
}
a#Setmore_button_iframe > img {
display: none;
}
a#Setmore_button_iframe:after
{
content:"Book Free Appointment"; /* TEXT YOU WANT */
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
cursor: pointer;
background-color: white;
color: black;
border: 2px solid #27C3BB;
font-family: sans-serif;
}
a#Setmore_button_iframe:hover:after {
background-color: #27C3BB;
color: white;
}
For Demo Check this link Setmore Custom Button
Have you tried setting button's background to the one you made? Check it below:
background: url("../images/button.png") no-repeat;
My navigation bar is using a (badly written I must say if someone can help me write it better by the way) JavaScript code to have it reduce in size when scrolling down.
It works fine in Chrome but doesn't activate in Firefox and IE.
I suspect it is because the height is set in the CSS file, but I have to set it in CSS for it to look right. Although I am most likely wrong.
Here is the JS:
<script type="text/javascript">
$(document).ready(function(){
$('#nav-background').data('size','big');
});
$(window).scroll(function(){
var $nav = $('#nav-background');
if ($('body').scrollTop() > 0) {
if ($nav.data('size') == 'big') {
$nav.data('size','small').stop().animate({
height:'60px'
}, 200);
$("#nav").animate({margin: "17px 0px 0px 0px"}, 200);
$(".smoothScroll").animate({margin: "17px 0px 0px 0px"}, 200);
}
} else {
if ($nav.data('size') == 'small') {
$nav.data('size','big').stop().animate({
height:'80px'
}, 200);
$("#nav").animate({margin: "27px 0px 0px 0px"}, 200);
$(".smoothScroll").animate({margin: "27px 0px 0px 0px"}, 200);
}
}
});
</script>
And here is the CSS:
#nav-background {
position: fixed;
width: 100%;
background-color: #FFFFFF;
z-index: 1000;
height:80px;
}
#nav-bar {
margin: 0 auto;
width: 90%;
height:100%;
max-width:1070px;
}
.smoothScroll {
text-decoration: none;
color: inherit;
position: relative;
text-align: left;
width:auto;
float:left;
margin-top:27px;
}
.logo-thin {
font-weight: 300;
color: #5B5B5B;
font-family: 'Ubuntu', sans-serif;
font-size: 22px;
}
.logo-bold {
font-family: 'Ubuntu', sans-serif;
font-size: 22px;
color: #535353;
font-weight: 500;
}
.logo-thin:hover {
cursor: url(../img/cursor-black.png) 20 20, move;
}
.logo-bold:hover {
cursor: url(../img/cursor-black.png) 20 20, move;
}
#nav {
list-style-type: none;
width: auto;
float: right;
position: relative;
color: #5B5B5B;
margin-top:27px;
}
#nav .current a {
color: #49E2D6;
}
#nav a:hover {
color:#49E2D6;
cursor: url(../img/cursor-black.png) 20 20, move;
}
#nav li {
float: left;
position:relative;
top:7px;
}
#nav a {
text-transform: uppercase;
background-position: right;
padding-right: 10px;
padding-left: 10px;
display: block;
text-decoration: none;
font-family: 'Ubuntu', sans-serif;
font-size: 13px;
font-weight: 400;
color: inherit;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
.nav-seperator {
position:relative;
top:-4px;
text-decoration: none;
font-family: 'Ubuntu', sans-serif;
font-size: 13px;
font-weight: 400;
}
And here is the website:
http://www.onepixelroom.com/droninrenovations/
Change
$('body').scrollTop()
to
$(window).scrollTop()
This is usually the recomended way to retrieve the scroll position of the window's content (and so the body as well).
Also I'd suggest to put everything inside the
$(document).ready(function(){
//
});
block. I mean, also the binding of the scroll event to the navbar resize function.
As a side note jQuery allows you to write the above block (with same funcionality) as
$(function() {
//
});