OnClick Doesn't Work First Time

OnClick Doesn't Work First Time - javascript

I have tried many different ways to overcome this issue, but unfortunately I have been unable to find the solution. (And yes, I have even tried searching for a solution to no avail.)
The trigger does not operate on the first go, however it does work there after. I have tried setting the targetToggle to 0 and it still did not work.
Any help on this would be much appreciated!
$(document).ready(function() {
$('.toggleTarget').hide();
$(".products-item").click(function() {
var a = $(this).data('number');
var toggleTargetId = $(this).attr('data-target');
var toggleTarget = $(document.getElementById(toggleTargetId));
if (a === "0") {
toggleTarget.show("slow", "swing");
$(this).data('number', '1');
} else {
toggleTarget.hide("slow", "swing");
$(this).data('number', '0');
}
});
});
.products-item {
height: auto;
width: 350px;
display: inline-block;
margin: 30px;
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
border: solid 2px #f5f5f5;
border-radius: 10px;
background-color: #f5f5f5;
cursor: pointer;
white-space: nowrap;
vertical-align: top;
transition: all 0.25s ease-in-out;
}
.products-item-label {
width: 100px;
height: auto;
font-size: 12px;
font-family: Comfortaa;
display: block;
position: relative;
padding: 10px;
left: -22px;
color: #fff;
background-color: #015c94;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.products-item-img {
height: auto;
width: auto;
display: inline-block;
border-radius: 190px;
transition: all 0.25s ease-in-out;
z-index: 10;
}
.products-item-text {
width: auto;
height: auto;
bottom: 0px;
left: 0px;
margin: 10px;
padding: 15px;
display: inline-block;
font-family: Comfortaa;
font-size: 14px;
text-align: center;
border-radius: 5px;
color: #333;
background-color: transparent;
transition: all 0.25s ease-in-out;
}
.products-item:hover {
border: solid 2px #bae9ff;
background-color: #bae9ff;
}
.products-item:hover .products-item-text {
color: #015c94;
border-radius: 5px;
}
.products-item:hover .products-item-details {
color: #015c94;
transition: color 0.25s ease-in-out;
}
.products-item-details {
height: auto;
width: 100%;
padding-top: 0px;
padding-bottom: 25px;
font-size: 14px;
text-align: center;
}
.products-item-details p {
width: 350px;
word-break: break-word;
word-break: break-all;
word-wrap: break-word;
white-space: pre-wrap;
}
.products-item-details ul {
width: 350px;
margin: 0;
display: inline-block;
}
.products-item-details li {
width: 350px;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
overflow: hidden;
word-wrap: break-word;
white-space: pre-wrap;
}
.products-item-details-table {
background-color: transparent;
width: 100%;
font-family: Comfortaa;
font-size: 14px;
padding-top: 20px;
padding-bottom: 20px;
table-layout: fixed;
white-space: nowrap;
/*border-collapse: collapse; REMOVE BORDER GAPPING */
}
.products-item-details-table tr {
width: 600px;
}
.products-item-details-table th {
background-color: #ccc;
color: #fff;
font-size: 15px;
font-weight: normal;
width: auto;
border: none;
text-align: center;
transition: all 0.25s ease-in-out;
}
.products-item-details-table td {
background-color: #fff;
width: 200px;
text-align: left;
transition: all 0.25s ease-in-out;
}
.products-item:hover .products-item-details-table th {
background-color: #015c94;
color: #fff;
font-size: 15px;
font-weight: normal;
width: auto;
border: none;
text-align: center;
}
.products-item:hover .products-item-details-table td {
background-color: #fff;
color: #015c94;
width: 200px;
text-align: left;
}
.products-item-link {
width: 100%;
height: 20px;
font-size: 16px;
color: #ccc;
text-decoration: none;
cursor: pointer;
transition: all 0.25s ease-in-out;
}
.products-item-link:hover {
color: #666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="info-9-btn" class="products-item" data-target="info-9" data-number="0">
<div class="products-item-label">NEW</div>
<div class="products-item-img buoy-9"></div>
<br />
<div class="products-item-text">Round Buoy</div>
<div id="info-9" class="products-item-details toggleTarget">
<ul style="list-style:none; padding:0; height:auto;">
<li>500mm x 500mm</li>
<li>Foam Filled</li>
<li>Can be engineered into a floating barrier to designate work zones, cordon off weir walls and other dangerous water areas.</li>
<li>Can be fitted with a mooring tube and used as a mooring buoy.</li>
<li>Can be used for any water application, where needed.</li>
</ul>
<p>Fully Owned and Made in Australia.</p>
<p>Roto Moulded in our fully automatic, gas compliant, Australian Standard Oven.</p>
</div>
<div class="toggleButton"></div>
</div>

use with (a=="0") instead of (a === 0)
Difference between == and === in JavaScript
$(document).ready(function(){
$('.toggleTarget').hide();
$(".products-item")
.click(function() {
var a = $(this).data('number');
var toggleTargetId = $(this).attr('data-target');
var toggleTarget = $(document.getElementById(toggleTargetId));
if (a=="0") {
toggleTarget.show("slow", "swing");
$(this).data('number','1');
} else {
toggleTarget.hide("slow", "swing");
$(this).data('number','0');
}
});
});
.products-item {
height: auto;
width: 350px;
display: inline-block;
margin: 30px;
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
border: solid 2px #f5f5f5;
border-radius: 10px;
background-color: #f5f5f5;
cursor: pointer;
white-space: nowrap;
vertical-align: top;
transition: all 0.25s ease-in-out;
}
.products-item-label {
width: 100px;
height: auto;
font-size: 12px;
font-family: Comfortaa;
display: block;
position: relative;
padding: 10px;
left: -22px;
color: #fff;
background-color: #015c94;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.products-item-img {
height: auto;
width: auto;
display: inline-block;
border-radius: 190px;
transition: all 0.25s ease-in-out;
z-index: 10;
}
.products-item-text {
width: auto;
height: auto;
bottom: 0px;
left: 0px;
margin: 10px;
padding: 15px;
display: inline-block;
font-family: Comfortaa;
font-size: 14px;
text-align: center;
border-radius: 5px;
color: #333;
background-color: transparent;
transition: all 0.25s ease-in-out;
}
.products-item:hover {
border: solid 2px #bae9ff;
background-color: #bae9ff;
}
.products-item:hover .products-item-text {
color: #015c94;
border-radius: 5px;
}
.products-item:hover .products-item-details {
color: #015c94;
transition: color 0.25s ease-in-out;
}
.products-item-details {
height: auto;
width: 100%;
padding-top: 0px;
padding-bottom: 25px;
font-size: 14px;
text-align: center;
}
.products-item-details p {
width: 350px;
word-break: break-word;
word-break: break-all;
word-wrap: break-word;
white-space: pre-wrap;
}
.products-item-details ul {
width: 350px;
margin: 0;
display: inline-block;
}
.products-item-details li {
width: 350px;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
overflow: hidden;
word-wrap: break-word;
white-space: pre-wrap;
}
.products-item-details-table {
background-color: transparent;
width: 100%;
font-family: Comfortaa;
font-size: 14px;
padding-top: 20px;
padding-bottom: 20px;
table-layout: fixed;
white-space: nowrap;
/*border-collapse: collapse; REMOVE BORDER GAPPING */
}
.products-item-details-table tr {
width: 600px;
}
.products-item-details-table th {
background-color: #ccc;
color: #fff;
font-size: 15px;
font-weight: normal;
width: auto;
border: none;
text-align: center;
transition: all 0.25s ease-in-out;
}
.products-item-details-table td {
background-color: #fff;
width: 200px;
text-align: left;
transition: all 0.25s ease-in-out;
}
.products-item:hover .products-item-details-table th {
background-color: #015c94;
color: #fff;
font-size: 15px;
font-weight: normal;
width: auto;
border: none;
text-align: center;
}
.products-item:hover .products-item-details-table td {
background-color: #fff;
color: #015c94;
width: 200px;
text-align: left;
}
.products-item-link {
width: 100%;
height: 20px;
font-size: 16px;
color: #ccc;
text-decoration: none;
cursor: pointer;
transition: all 0.25s ease-in-out;
}
.products-item-link:hover {
color: #666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="info-9-btn" class="products-item" data-target="info-9" data-number="0">
<div class="products-item-label">NEW</div>
<div class="products-item-img buoy-9"></div><br />
<div class="products-item-text">Round Buoy</div>
<div id="info-9" class="products-item-details toggleTarget">
<ul style="list-style:none; padding:0; height:auto;">
<li>500mm x 500mm</li>
<li>Foam Filled</li>
<li>Can be engineered into a floating barrier to designate work zones, cordon off weir walls and other dangerous water areas.</li>
<li>Can be fitted with a mooring tube and used as a mooring buoy.</li>
<li>Can be used for any water application, where needed.</li>
</ul>
<p>Fully Owned and Made in Australia.</p>
<p>Roto Moulded in our fully automatic, gas compliant, Australian Standard Oven.</p>
</div>
<div class="toggleButton"></div>
</div>

It's because if ( a === "0") { is checking the types and values. A is a number and "0" is a string. Change it to a == "0".

Change the === to == and it will work.
Alternatively, test a === 0 without the quotes, and then within the if/else where you change the value set it to 0 or 1 without the quotes.
The problem is that the .data() method is "smart": if the value in the data-number attribute can be converted to a numeric value then it returns a number rather than a string.
In your case you have data-number="0", so .data('number') returns 0, not "0". But === tests for type equality, whereas == allows type coercion.
(Expand and run the following to see it work with ==:)
$(document).ready(function(){
$('.toggleTarget').hide();
$(".products-item")
.click(function() {
var a = $(this).data('number');
var toggleTargetId = $(this).attr('data-target');
var toggleTarget = $(document.getElementById(toggleTargetId));
if ( a == "0") {
toggleTarget.show("slow", "swing");
$(this).data('number','1');
} else {
toggleTarget.hide("slow", "swing");
$(this).data('number','0');
}
});
});
.products-item {
height: auto;
width: 350px;
display: inline-block;
margin: 30px;
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
border: solid 2px #f5f5f5;
border-radius: 10px;
background-color: #f5f5f5;
cursor: pointer;
white-space: nowrap;
vertical-align: top;
transition: all 0.25s ease-in-out;
}
.products-item-label {
width: 100px;
height: auto;
font-size: 12px;
font-family: Comfortaa;
display: block;
position: relative;
padding: 10px;
left: -22px;
color: #fff;
background-color: #015c94;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.products-item-img {
height: auto;
width: auto;
display: inline-block;
border-radius: 190px;
transition: all 0.25s ease-in-out;
z-index: 10;
}
.products-item-text {
width: auto;
height: auto;
bottom: 0px;
left: 0px;
margin: 10px;
padding: 15px;
display: inline-block;
font-family: Comfortaa;
font-size: 14px;
text-align: center;
border-radius: 5px;
color: #333;
background-color: transparent;
transition: all 0.25s ease-in-out;
}
.products-item:hover {
border: solid 2px #bae9ff;
background-color: #bae9ff;
}
.products-item:hover .products-item-text {
color: #015c94;
border-radius: 5px;
}
.products-item:hover .products-item-details {
color: #015c94;
transition: color 0.25s ease-in-out;
}
.products-item-details {
height: auto;
width: 100%;
padding-top: 0px;
padding-bottom: 25px;
font-size: 14px;
text-align: center;
}
.products-item-details p {
width: 350px;
word-break: break-word;
word-break: break-all;
word-wrap: break-word;
white-space: pre-wrap;
}
.products-item-details ul {
width: 350px;
margin: 0;
display: inline-block;
}
.products-item-details li {
width: 350px;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
overflow: hidden;
word-wrap: break-word;
white-space: pre-wrap;
}
.products-item-details-table {
background-color: transparent;
width: 100%;
font-family: Comfortaa;
font-size: 14px;
padding-top: 20px;
padding-bottom: 20px;
table-layout: fixed;
white-space: nowrap;
/*border-collapse: collapse; REMOVE BORDER GAPPING */
}
.products-item-details-table tr {
width: 600px;
}
.products-item-details-table th {
background-color: #ccc;
color: #fff;
font-size: 15px;
font-weight: normal;
width: auto;
border: none;
text-align: center;
transition: all 0.25s ease-in-out;
}
.products-item-details-table td {
background-color: #fff;
width: 200px;
text-align: left;
transition: all 0.25s ease-in-out;
}
.products-item:hover .products-item-details-table th {
background-color: #015c94;
color: #fff;
font-size: 15px;
font-weight: normal;
width: auto;
border: none;
text-align: center;
}
.products-item:hover .products-item-details-table td {
background-color: #fff;
color: #015c94;
width: 200px;
text-align: left;
}
.products-item-link {
width: 100%;
height: 20px;
font-size: 16px;
color: #ccc;
text-decoration: none;
cursor: pointer;
transition: all 0.25s ease-in-out;
}
.products-item-link:hover {
color: #666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="info-9-btn" class="products-item" data-target="info-9" data-number="0">
<div class="products-item-label">NEW</div>
<div class="products-item-img buoy-9"></div><br />
<div class="products-item-text">Round Buoy</div>
<div id="info-9" class="products-item-details toggleTarget">
<ul style="list-style:none; padding:0; height:auto;">
<li>500mm x 500mm</li>
<li>Foam Filled</li>
<li>Can be engineered into a floating barrier to designate work zones, cordon off weir walls and other dangerous water areas.</li>
<li>Can be fitted with a mooring tube and used as a mooring buoy.</li>
<li>Can be used for any water application, where needed.</li>
</ul>
<p>Fully Owned and Made in Australia.</p>
<p>Roto Moulded in our fully automatic, gas compliant, Australian Standard Oven.</p>
</div>
<div class="toggleButton"></div>
</div>

Related

Special character ₀ mess up the element layout in a Chrome extension popup

I need help to understand and prevent this.
The character '₀' between 'uBlock' and 'Dashboard' cause issues with the div below it and removing that character solves the issue. I've never encountered this before, is it a chrome bug or my lack of knowledge?
I've tested the extension with Chrome Canary Version 89.0.4385.1 (Official Build) canary-dcheck (32-bit) and it have the same issue.
<div class="title">uBlock₀ — Dashboard</div>
Character removed solves the problem:
<div class="title">uBlock — Dashboard</div>
The list item looks like this:
<div tabindex="0" class="item">
<img src="chrome://favicon/chrome-extension://cjpalhdlnbpafiamejdnhcphjbkeiagm/dashboard.html#3p-filters.html" title="chrome-extension://cjpalhdlnbpafiamejdnhcphjbkeiagm/dashboard.html#3p-filters.html">
<div class="title">uBlock₀ — Dashboard</div>
<div class="close" title="Close Tab">x</div>
<div class="title" title="chrome-extension://cjpalhdlnbpafiamejdnhcphjbkeiagm/dashboard.html#3p-filters.html">chrome-extension://cjpalhdlnbpafiamejdnhcphjbkeiagm/dashboard.html#3p-filters.html</div>
</div>
Edit: The entire css file.
div, img {
-webkit-user-select: none;
}
body {
margin: 0px;
max-width: 288px;
overflow-x: hidden;
font: 12px 'lucida grande', helvetica, arial, sans-serif;
}
#main {
width: 288px;
}
#search {
width: 284px;
border: 1px solid #abc;
padding: 2px 1px;
margin-bottom: 1px;
}
#search:focus {
outline: 2px solid #adf;
-webkit-box-shadow: 0 0 3px #adf;
}
.item {
width: 286px;
float: left;
clear: both;
padding-top: 3px;
padding-bottom: 3px;
cursor: pointer;
background: #fff;
border: 1px solid #fff;
border-radius: 2px;
-webkit-transition: .2s ease-out;
-webkit-transition-property: background-color, border-color;
}
.item:hover, .item:focus {
background: #def;
border-color: #bdf;
outline: 0;
}
.item:active {
border-color: #69f;
}
.selected {
background: #5bf !important;
border-color: #3af !important;
color: #fff !important;
}
.selected:hover, .selected:focus {
background: #3af !important;
border-color: #19f !important;
}
img {
float: left;
width: 16px;
height: 16px;
/*margin: 0 5px;*/
}
img:not(.sound) {
margin-left: 5px;
}
.title {
float: left;
width: 260px;
overflow-x: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-left: 5px;
}
.title.sound {
width: 240px;
}
.close {
float: left;
text-align: right;
width: 12px;
font: bold 12px verdana, sans-serif;
margin-top: -1px;
padding-right: 6px;
display: none;
}
.item .close {
color: #567;
}
.item .close:hover {
color: #000;
}
.selected .title {
font-weight: bold;
}
.selected .close {
color: #def;
}
.selected .close:hover {
color: #fff;
}
.item:hover .title.sound {
width: 224px;
}
.item:hover .title:not(.sound) {
width: 240px;
}
.item:hover .close {
display: block;
}
.overflow #search {
width: 270px;
}
.overflow .item:not(.sound) {
width: 272px;
}
.overflow .title:not(.sound) {
width: 246px;
}
.overflow .item:hover .title:not(.sound) {
width: 200px;
}
.overflow .item:hover .title:not(.sound) {
width: 226px;
}
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar:vertical {
border-color: transparent;
background: #fff;
}
::-webkit-scrollbar-thumb:vertical {
-webkit-border-image: url(scrollbar.png) 14 0 15 0;
border-color: transparent;
border-width: 15px 0;
min-height: 20px;
}
.discarded {
background-color: lightgray;
}
.discarded img {
filter: grayscale(100%);
}
.link {
float: left;
width: 260px;
overflow-x: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-left: 5px;
}
.link.sound {
width: 240px;
}
.selected .link {
font-weight: bold;
}
.item:hover .link.sound {
width: 224px;
}
.item:hover .link:not(.sound) {
width: 240px;
}
.overflow .link:not(.sound) {
width: 246px;
}
.overflow .item:hover .link:not(.sound) {
width: 200px;
}
.overflow .item:hover .link:not(.sound) {
width: 226px;
}

Profile card going outside of the browser window

I want to achieve the mini profile view like in twitter. When we hover a user's name, his mini profile view is coming. But my problem it is going outside of the browser window. I need to adjust it according to the viewport. It should go outside of the window, it should adjust automatically.
it is coming this way
I need it this way
here is the code
<div class="popover__wrapper">
<a>Cyril</a>
<div class="push popover__content">
<div class="contact-card-user">
<div class="left-side">
<img src="../assets/img/profiles/male-user.jpg" alt="">
</div>
<div class="right-side">
<div class="details-wrapper">
<h3>Full Name </h3>
<div class="privilege">Administrator</div>
<div class="designation">Designer</div>
<div class="description">+973 1234 5678</div>
<div class="description">info#company.com</div>
</div>
</div>
</div>
</div>
<style>
.popover__wrapper {
position: relative;
margin-top: 0;
display: block;
cursor: pointer;
}
.popover__content {
opacity: 0;
visibility: hidden;
position: absolute;
left: 40px;
bottom: -90px;
transform: translate(0, 30px);
background-color: transparent;
padding: 0;
width: auto;
}
.popover__content:before {
position: absolute;
z-index: -1;
content: '';
left: -20px;
bottom: 100px;
border-style: solid;
border-width: 10px 10px 10px 10px;
border-color: transparent transparent transparent #a5053d;
transition-duration: 0.3s;
transition-property: transform;
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}
.contact-card-user {
background: #fff;
display: flex;
width: max-content;
box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.05);
}
.contact-card-user .left-side {
margin-right: 20px;
width: 100%;
max-width: 200px;
}
.contact-card-user .left-side img {
width: 100%;
height: auto;
}
.contact-card-user .right-side {
padding-left: 3px;
padding-top: 5px;
padding-bottom: 10px;
padding-right: 25px;
width: 100%;
max-width: 260px;
}
.contact-card-user .details-wrapper {
text-align: left;
}
.contact-card-user .details-wrapper h3 {
color: #333;
font-size: 16px;
white-space: pre-wrap;
overflow: hidden;
margin-bottom: 1px;
line-height: normal;
}
.contact-card-user .details-wrapper .privilege {
display: inline-block;
color: #a5053c;
font-weight: 400;
font-size: 14px;
letter-spacing: 0.7px;
margin-bottom: 13px;
margin-top: 6px;
border-bottom: 1px solid #00a000;
}
.contact-card-user .details-wrapper .designation {
color: #333;
margin-bottom: 5px;
}
.contact-card-user .details-wrapper .description {
color: #9a9a9a;
font-size: 12px;
line-height: 17px;
}
.contact-card-user .details-wrapper .description {
color: #9a9a9a;
font-size: 12px;
line-height: 17px;
}
</style>
I think may be javascript can solve. Any help?
Thank you

JQuery .show() and .hide() not working correctly

I have been trying to get the below code working for the past 2 hours with no luck. Can anyone see where I am having issues?
Snippet:
<script>
$(document).ready(function(e) {
$('.messageBox').hide();
$('#color').text('');
$('.color-select-orange').click(function(e) {
$('.messageBox').show().delay(2000).hide();
$('#color').text('Orange').show().delay(2000).hide();
});
});
</script>
$(document).ready(function(e) {
$('.messageBox').hide();
$('#color').text('');
$('.color-select-orange').click(function(e) {
$('.messageBox').show().delay(2000).hide();
$('#color').text('Orange').show().delay(2000).hide();
});
});
.messageBox {
height: auto;
width: auto;
text-align: center;
z-index: 100;
padding: 100px;
background-color: #222;
color: #fff;
font-family: poppins;
font-size: 14px;
display: block;
}
.messageBox span {
color: #fff;
font-weight: bold;
font-family: poppins;
font-size: 14px;
}
.customiser {
height: auto;
width: auto;
position: fixed;
top: 10px;
left: 0px;
font-size: 14px;
font-family: poppins;
display: inline-block;
background-color: transparent;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
cursor: pointer;
}
.themes {
height: auto;
width: auto;
position: relative;
font-size: 14px;
font-family: poppins;
display: inline-block;
background-color: #222;
color: #777;
border-top-right-radius: 10px;
cursor: pointer;
}
.color-select {
height: auto;
width: 100px;
padding: 20px;
font-size: 14px;
font-family: poppins;
display: inline-block;
background-color: #333;
color: #777;
}
.color-select:hover {
background-color: #222;
color: #fff;
}
.color-select-table {
width: 100%;
background-color: #222;
display: inline-block;
margin-top: 10px;
}
.color-select-orange {
height: auto;
width: 100%;
display: inline-block;
background-color: transparent;
color: #ff6e00;
border-radius: 5px;
border: thin solid #222;
padding-top: 5px;
padding-bottom: 5px;
}
.color-select-orange:hover {
background-color: #ff6e00;
color: #fff;
}
.color-select-green {
height: auto;
width: 100%;
display: inline-block;
background-color: transparent;
color: #9ad749;
border-radius: 5px;
border: thin solid #222;
padding-top: 5px;
padding-bottom: 5px;
}
.color-select-green:hover {
background-color: #9ad749;
color: #fff;
}
.color-select-blue {
height: auto;
width: 100%;
display: inline-block;
background-color: transparent;
color: #4589f3;
border-radius: 5px;
border: thin solid #222;
padding-top: 5px;
padding-bottom: 5px;
}
.color-select-blue:hover {
background-color: #4589f3;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="messageBox">Theme successfully changed to<br> <span id="color">*SELECTED_COLOUR*</span></div>
<div class="customiser">
<div class="themes">
<div class="color-select">Theme<br>
<div class="color-select-table">
<div class="color-select-orange" onclick="swapStyleSheet('_scripts/default.css')">Orange</div><br>
<div class="color-select-green" onclick="swapStyleSheet('_scripts/green.css')">Green</div><br>
<div class="color-select-blue" onclick="swapStyleSheet('_scripts/blue.css')">Blue</div>
</div>
</div><!--END COLOR-SELECT-->
</div><!--END THEMES-->
</div><!--END OF CUSTOMISER-->
The swapStyleSheet command works fine, but the text change for #color and the display change for .messageBox does not.

jQuery's show() and hide() are not animated by default, and doesn't support delay() as they don't add the the FX queue.
When the delay doesn't work, the elements are hidden right away, and never made visible for two seconds.
To make them animated, one has to pass in a number, and even zero should do it
$(document).ready(function(e) {
$('.messageBox').hide();
$('#color').text('');
$('.color-select-orange').click(function(e) {
console.log('ds')
$('.messageBox').show().delay(2000).hide(0);
$('#color').text('Orange').show().delay(2000).hide(0);
});
});
.messageBox {
height: auto;
width: auto;
text-align: center;
z-index: 100;
padding: 100px;
background-color: #222;
color: #fff;
font-family: poppins;
font-size: 14px;
display: block;
}
.messageBox span {
color: #fff;
font-weight: bold;
font-family: poppins;
font-size: 14px;
}
.customiser {
height: auto;
width: auto;
position: fixed;
top: 10px;
left: 0px;
font-size: 14px;
font-family: poppins;
display: inline-block;
background-color: transparent;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
cursor: pointer;
}
.themes {
height: auto;
width: auto;
position: relative;
font-size: 14px;
font-family: poppins;
display: inline-block;
background-color: #222;
color: #777;
border-top-right-radius: 10px;
cursor: pointer;
}
.color-select {
height: auto;
width: 100px;
padding: 20px;
font-size: 14px;
font-family: poppins;
display: inline-block;
background-color: #333;
color: #777;
}
.color-select:hover {
background-color: #222;
color: #fff;
}
.color-select-table {
width: 100%;
background-color: #222;
display: inline-block;
margin-top: 10px;
}
.color-select-orange {
height: auto;
width: 100%;
display: inline-block;
background-color: transparent;
color: #ff6e00;
border-radius: 5px;
border: thin solid #222;
padding-top: 5px;
padding-bottom: 5px;
}
.color-select-orange:hover {
background-color: #ff6e00;
color: #fff;
}
.color-select-green {
height: auto;
width: 100%;
display: inline-block;
background-color: transparent;
color: #9ad749;
border-radius: 5px;
border: thin solid #222;
padding-top: 5px;
padding-bottom: 5px;
}
.color-select-green:hover {
background-color: #9ad749;
color: #fff;
}
.color-select-blue {
height: auto;
width: 100%;
display: inline-block;
background-color: transparent;
color: #4589f3;
border-radius: 5px;
border: thin solid #222;
padding-top: 5px;
padding-bottom: 5px;
}
.color-select-blue:hover {
background-color: #4589f3;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="messageBox">Theme successfully changed to
<br> <span id="color">*SELECTED_COLOUR*</span>
</div>
<div class="customiser">
<div class="themes">
<div class="color-select">Theme
<br>
<div class="color-select-table">
<div class="color-select-orange">Orange</div>
<br>
<div class="color-select-green">Green</div>
<br>
<div class="color-select-blue">Blue</div>
</div>
</div>
</div>
</div>

Javascript to reveal hidden DIV

I have been working on a code to display more details when an item is clicked. So far I have come up with this.
HTML:
<script>
$(document).ready(function(){
$('.toggleTarget').hide();
$(".products-item")
.click(function() {
var id = $(this).attr('data-number');
var toggleTargetId = $(this).attr('data-target');
var toggleTarget = $(document.getElementById(toggleTargetId));
if ( id.val() === "0" ) {
toggleTarget.show("slow", "swing");
id.val(1)
} else {
toggleTarget.hide("slow", "swing");
id.val(0)
}
});
});
</script>
<div id="info-1-btn" class="products-item" data-target="info-1" data-number="0">
<div class="products-item-img buoy-1"></div><br />
<div class="products-item-text">Sign Float</div>
<div class="products-item-details">
<div id="info-1" class="products-item-details toggleTarget">
<table class="products-item-details-table" cellpadding="15px">
<tr>
<th>Sizes:</th>
<th>Material:</th>
</tr>
<tr>
<td>500mm</td>
<td>*MATERIAL*</td>
</tr>
</table>
</div>
</div>
</div>
CSS:
.products-item {
height: auto;
width: 300px;
display: inline-block;
margin: 10px;
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
border: solid 2px #f5f5f5;
border-radius: 10px;
background-color: #f5f5f5;
cursor: pointer;
transition: all 0.25s ease-in-out;
}
.products-item-img {
height: auto;
width: auto;
display: inline-block;
border-radius: 140px;
transition: all 0.25s ease-in-out;
z-index: 10;
}
.products-item-text {
width: auto;
height: auto;
bottom: 0px;
left: 0px;
margin: 10px;
padding: 15px;
display: inline-block;
font-family: Comfortaa;
font-size: 14px;
text-align: center;
border-radius: 5px;
color: #333;
background-color: transparent;
transition: all 0.25s ease-in-out;
}
.products-item:hover {
background-color: #bae9ff;
border: solid 2px #bae9ff;
}
.products-item:hover .products-item-text {
color: #000;
border-radius: 5px;
}
.products-item-details-table {
background-color: transparent;
width: 100%;
font-family: Comfortaa;
font-size: 14px;
padding-top: 20px;
padding-bottom: 20px;
table-layout: fixed;
white-space: nowrap;
/*border-collapse: collapse; REMOVE BORDER GAPPING */
}
.products-item-details-table tr {
background-color: #fff;
width: 600px;
}
.products-item-details-table th {
background-color: #ccc;
color: #fff;
font-size: 15px;
font-weight: normal;
width: auto;
border: none;
text-align: center;
}
.products-item-details-table td {
background-color: #fff;
width: 200px;
text-align: left;
}
I am looking to reveal products-item-details when I click on the selected products-item div.
If you require more information, please let me know.
Thank you.

i cant redirect and go to a specific section

i am trying to redirect to this page and go a specific part of the page, which is powered by java script to move around. i want to be able to go to say, delete section. but i cant achieve it using localhost/entry.php#delete . what am i doing wrong? below is the snippet.
(function($) {
// constants
var SHOW_CLASS = 'show',
HIDE_CLASS = 'hide',
ACTIVE_CLASS = 'active';
$('.tabs').on('click', 'li a', function(e) {
e.preventDefault();
var $tab = $(this),
href = $tab.attr('href');
$('.active').removeClass(ACTIVE_CLASS);
$tab.addClass(ACTIVE_CLASS);
$('.show')
.removeClass(SHOW_CLASS)
.addClass(HIDE_CLASS)
.hide();
$(href)
.removeClass(HIDE_CLASS)
.addClass(SHOW_CLASS)
.hide()
.fadeIn(550);
});
})(jQuery);
#import url(http://fonts.googleapis.com/css?family=Roboto:100);
#import url(http://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css);
body {
background: #1a1a1a;
color: white;
font-family: 'Roboto';
}
.flat-form {
background: #e74c3c;
margin: 25px auto;
width: 80%;
height: 450px;
position: relative;
font-family: 'Roboto';
}
.red-form {
background: #e74c3c;
margin: 25px auto;
width: 80%;
position: relative;
font-family: 'Roboto';
padding: 15px;
}
label {
font-weight: bold;
}
.tabs {
background: #c0392b;
height: 40px;
margin: 0;
padding: 0;
list-style-type: none;
width: 100%;
position: relative;
display: block;
margin-bottom: 20px;
}
.tabs li {
display: block;
float: left;
margin: 0;
padding: 0;
}
.tabs a {
background: #c0392b;
display: block;
float: left;
text-decoration: none;
color: white;
font-size: 16px;
padding: 12px 22px 12px 22px;
/*border-right: 1px solid #tab-border;*/
}
.tabs li:last-child a {
border-right: none;
width: 174px;
padding-left: 0;
padding-right: 0;
text-align: center;
}
.tabs a.active {
background: #e74c3c;
border-right: none;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.form-action {
padding: 0 20px;
position: relative;
}
.form-action h1 {
font-size: 42px;
padding-bottom: 10px;
}
.form-action p {
font-size: 12px;
padding-bottom: 10px;
line-height: 25px;
}
form {
padding-right: 20px !important;
}
form input[type=text],
form input[type=password],
form input[type=submit] {
font-family: 'Roboto';
}
form input[type=text],
form input[type=password] {
width: 100%;
height: 40px;
margin-bottom: 10px;
padding-left: 15px;
background: #fff;
border: none;
color: #e74c3c;
outline: none;
}
.dark-box {
background: #5e0400;
box-shadow: 1px 3px 3px #3d0100 inset;
height: 40px;
width: 50px;
}
.form-action .dark-box.bottom {
position: absolute;
right: 0;
bottom: -24px;
}
.tabs + .dark-box.top {
position: absolute;
right: 0;
top: 0px;
}
.show {
display: block;
}
.hide {
display: none;
}
.button {
border: none;
display: block;
background: #136899;
height: 40px;
width: 80px;
color: #ffffff;
text-align: center;
border-radius: 5px;
/*box-shadow: 0px 3px 1px #2075aa;*/
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
transition: all 0.15s linear;
font-weight: bold;
}
.button:hover {
background: #1e75aa;
/*box-shadow: 0 3px 1px #237bb2;*/
}
.button:active {
background: #136899;
/*box-shadow: 0 3px 1px #0f608c;*/
}
::-webkit-input-placeholder {
color: #e74c3c;
font-weight: bold;
}
:-moz-placeholder {
/* Firefox 18- */
color: #e74c3c;
font-weight: bold;
}
::-moz-placeholder {
/* Firefox 19+ */
color: #e74c3c;
font-weight: bold;
}
:-ms-input-placeholder {
color: #e74c3c;
font-weight: bold;
}
select {
margin: 10px;
border: 1px solid #111;
background: transparent;
width: 300px;
padding: 5px 35px 5px 5px;
font-size: 16px;
border: 1px solid #ccc;
font-weight: bold;
color: #504848;
}
<body>
<div class="container">
<div class="flat-form">
<ul class="tabs">
<li>
Insert
</li>
<li>
Update
</li>
<li>
Delete
</li>
</ul>
<div id="insert" class="form-action show">
<h1>Insert</h1>
<p>
insert data goes here
</p>
</div>
<div id="update" class="form-action hide">
<h1>Update</h1>
<p>
update data goes here
</p>
</div>
<div id="delete" class="form-action hide">
<h1>Delete</h1>
<p>
delete data goes here
</p>
</div>
</div>
</div>
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</body>

Anchors apply just for simple navigation around the page, for changing tabs etc. you need to add some extra code, something like:
(function($) {
// constants
var SHOW_CLASS = 'show',
HIDE_CLASS = 'hide',
ACTIVE_CLASS = 'active';
switchTab = function(href){
var $link = $('a[href=' + href + ']'),
$tab = $(href);
$('.active').removeClass(ACTIVE_CLASS);
$link.addClass(ACTIVE_CLASS);
$('.show')
.removeClass(SHOW_CLASS)
.addClass(HIDE_CLASS)
.hide();
$($tab)
.removeClass(HIDE_CLASS)
.addClass(SHOW_CLASS)
.hide()
.fadeIn(550);
}
$('.tabs').on('click', 'li a', function(e) {
e.preventDefault();
switchTab($(this).attr('href'));
});
if(window.location.hash){
switchTab(window.location.hash);
}
})(jQuery);
#import url(http://fonts.googleapis.com/css?family=Roboto:100);
#import url(http://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css);
body {
background: #1a1a1a;
color: white;
font-family: 'Roboto';
}
.flat-form {
background: #e74c3c;
margin: 25px auto;
width: 80%;
height: 450px;
position: relative;
font-family: 'Roboto';
}
.red-form {
background: #e74c3c;
margin: 25px auto;
width: 80%;
position: relative;
font-family: 'Roboto';
padding: 15px;
}
label {
font-weight: bold;
}
.tabs {
background: #c0392b;
height: 40px;
margin: 0;
padding: 0;
list-style-type: none;
width: 100%;
position: relative;
display: block;
margin-bottom: 20px;
}
.tabs li {
display: block;
float: left;
margin: 0;
padding: 0;
}
.tabs a {
background: #c0392b;
display: block;
float: left;
text-decoration: none;
color: white;
font-size: 16px;
padding: 12px 22px 12px 22px;
/*border-right: 1px solid #tab-border;*/
}
.tabs li:last-child a {
border-right: none;
width: 174px;
padding-left: 0;
padding-right: 0;
text-align: center;
}
.tabs a.active {
background: #e74c3c;
border-right: none;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.form-action {
padding: 0 20px;
position: relative;
}
.form-action h1 {
font-size: 42px;
padding-bottom: 10px;
}
.form-action p {
font-size: 12px;
padding-bottom: 10px;
line-height: 25px;
}
form {
padding-right: 20px !important;
}
form input[type=text],
form input[type=password],
form input[type=submit] {
font-family: 'Roboto';
}
form input[type=text],
form input[type=password] {
width: 100%;
height: 40px;
margin-bottom: 10px;
padding-left: 15px;
background: #fff;
border: none;
color: #e74c3c;
outline: none;
}
.dark-box {
background: #5e0400;
box-shadow: 1px 3px 3px #3d0100 inset;
height: 40px;
width: 50px;
}
.form-action .dark-box.bottom {
position: absolute;
right: 0;
bottom: -24px;
}
.tabs + .dark-box.top {
position: absolute;
right: 0;
top: 0px;
}
.show {
display: block;
}
.hide {
display: none;
}
.button {
border: none;
display: block;
background: #136899;
height: 40px;
width: 80px;
color: #ffffff;
text-align: center;
border-radius: 5px;
/*box-shadow: 0px 3px 1px #2075aa;*/
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
transition: all 0.15s linear;
font-weight: bold;
}
.button:hover {
background: #1e75aa;
/*box-shadow: 0 3px 1px #237bb2;*/
}
.button:active {
background: #136899;
/*box-shadow: 0 3px 1px #0f608c;*/
}
::-webkit-input-placeholder {
color: #e74c3c;
font-weight: bold;
}
:-moz-placeholder {
/* Firefox 18- */
color: #e74c3c;
font-weight: bold;
}
::-moz-placeholder {
/* Firefox 19+ */
color: #e74c3c;
font-weight: bold;
}
:-ms-input-placeholder {
color: #e74c3c;
font-weight: bold;
}
select {
margin: 10px;
border: 1px solid #111;
background: transparent;
width: 300px;
padding: 5px 35px 5px 5px;
font-size: 16px;
border: 1px solid #ccc;
font-weight: bold;
color: #504848;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body>
<div class="container">
<div class="flat-form">
<ul class="tabs">
<li>
Insert
</li>
<li>
Update
</li>
<li>
Delete
</li>
</ul>
<div id="insert" class="form-action show">
<h1>Insert</h1>
<p>
insert data goes here
</p>
</div>
<div id="update" class="form-action hide">
<h1>Update</h1>
<p>
update data goes here
</p>
</div>
<div id="delete" class="form-action hide">
<h1>Delete</h1>
<p>
delete data goes here
</p>
</div>
</div>
</div>
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</body>

We Keep Coding

JavaScript is the programming language of the Web.

OnClick Doesn't Work First Time - javascript

It's because if ( a === "0") { is checking the types and values. A is a number and "0" is a string. Change it to a == "0".

Related

Special character ₀ mess up the element layout in a Chrome extension popup

Profile card going outside of the browser window

JQuery .show() and .hide() not working correctly

Javascript to reveal hidden DIV

i cant redirect and go to a specific section

Categories

Resources