I'm using a badge icon to display the number of cart items. It works great when the number is 1 or more but if there are no items in the cart, it doesn't display zero, but rather half of it disappears. I've posted screenshots of what it looks like with a value of 1+ and then what it looks like when the cart is empty. Further, even after an item is added to the cart, the badge doesn't pop up with the number until refreshing or going to the next page after the item has been added.
I'm thinking I probably have to add more script but just learning and not sure how I would do this.
To give the full picture: This is a BigCommerce site so the cart info is generated by an internal server. It is referenced by variable %%GLOBAL_CartItems%% (in code below) and normally displays as a text string, "View Cart.." along with the total number of items in the cart. Since I only want the number, I added script that replaces the text with numeric values only. I've included both the HTML and script below.
What it looks like with 1 or more in cart:
What it looks like with no items in cart:
<li style="display:%%GLOBAL_HideCartOptions%%">
<span><i class="icon-large sprite-glyphicons_halflings_115_shopping-cart2x icon-2x" style="position: relative; top: 14px; right: 16px;"></i><span id='cart-items' class="badge badge-info" style="position: relative; top: 18px; right: 17px;">%%GLOBAL_CartItems%%</span></span>
</li>
<script type='text/javascript'>
var $cart_items = $('#cart-items');
$cart_items.text($cart_items.text().replace(/[^0-9]/g, ''));
</script>
Badge CSS:
.badge {
padding: 1px 9px 2px;
font-size: 10.998px;
font-weight: bold;
line-height: 14px;
color: #ffffff;
vertical-align: baseline;
white-space: nowrap;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #999999;
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;
}
Add the folowwing CSS to your styleshtee file or add it inline
.cart-items {
display:block;
min-width:25px;
}
I suspect that the html(or its css at least) of the badge icon is responsible for its disappearance, as in it is not correctly put together.Post a code sample, and we will try to fix it. As for the number not being updated until refresh, my first question would be do you capture the event when a buyer puts something in the cart? That would be the time to update the number, say like:
$("#cart").on('update', undefined, cart.NumberOfItems, updateBadgeIcon);
function updateBadgeIcon(event)
{
var newNumber = event.Data;
$('#badgeNumber').html(newNumber);
};
Take a look at jQuery documentation, and jQuery on method.
Figured out the answer to my own issue:
turns out I was missing some CSS for the badge:
.badge:empty {
display: none;
}
Guess I thought this would be in the bootstrap already...either I erroneously deleted it somehow or maybe it just needed to be added. Either way, problem solved.
Related
I have a page which displays a story, with buttons at the button to go from page 1 to page 2 and 3 and vise versa, the story is in a one array position which i've sliced using a character length to fill out each page. The text which im appending to the paragraphs on each page contains tags. Im trying to add tooltips for each bit of i've placed in bold tags. I'm trying to get all on the page, log the x and y position and then create an element with the text which is needed for each element. Here's an example of what my code looks like
pageItemsArray = [
['The <b tooltip ="make: rennault">car</b> is a round <b tooltip ="name: oak">tree</b>.']
['make: rennault', 'name: oak']
]
note: tooltip="make: rennault" and tooltip="name: oak" is only there for people trying to solve this with css, and is not there for people trying to solve this with javascript, however it doensn't need to be removed
html :
<p class="insertStoryPageHere"><p>
javascript:
for(i=0; i<document.getElementsByTagName("b").length; i++) {
/*run code for all tooltips here*/
element = document.createElement("SPAN");
element.innerHTML = pageItemsArray[1][i].toString();
element.setAttribute("class", "tooltip");
document.body.appendChild(element);
x = document.getElementsByTagName("b")[i].offsetLeft;
y = document.getElementsByTagName("b")[i].offsetTop;
element.setAttribute("left", x);
element.setAttribute("top", y);
}
However, the spans are positioned at the bottom of the page, and not anywhere near where they are meant to be.
Update: Still not answered :(
heres css for people trying to solve via css
b:hover[tooltip]:before {
content: attr(tooltip);
position: absolute;
z-index: 1;
top: 0rem;
left: 0rem;
padding: 5px;
background-color: black;
color: white;
border-radius: 5px;
.insertStoryPageHere {
position: relative;
font-family: Proxima;
font-size: 16px;
line-height: 2em;
height: 311px;
}
The problem with the css solution is that the tooltips are moving the paragraph text on hover...
What it looks like, the with the css
Here is a quick and dirty CSS only solution. I simply added a tooltip attribute to <b> with some text (slightly different from your array, though). This should give you some direction. No need for a complicated construction with remembering positions and what all not. Keep things simple and save the headache for the really hard stuff.
body { margin: 0; padding: 5rem } /* some spacing */
p { position: relative } /* creat a stacking context */
b:hover[tooltip]:before {
content: attr(tooltip);
position: absolute;
/* position within parent stacking context (the <p>, default is <body>) */
top: -2.5rem;
padding: 0.5rem;
background-color: black; color: white;
}
<p>this is a text about <b tooltip="car brand">Renault</b> and how you can keep it running for <b tooltip="unit of time">years</b>
So fair warning, I'm a novice when it comes to most things-JS.
I'm working on a unique project wherein I am customizing the visual appearance of a sub-section of a website for a product my company owns. I cannot alter the HTML code of the pages (for reasons above my pay-grade), so everything I'm adding/changing is being done through a combination of JS and CSS.
My issue is that I have created a series of buttons which I have organized into a group in CSS. I am placing the buttons on the page using JS, with functions for what each button is supposed to do (generally just navigating to a URL), and then further modifying the location of the button group via CSS. I was able to do this easily enough when the buttons were not grouped using CSS, but then I realized I needed the buttons organized seamlessly next to each other, while using the margin-left property to slide the group as a whole to a specific part of the page.
The JS code looks like this:
<script type="text/javascript">
$( document ).ready(function() {
$('#productToolbar').append('<button onclick="goHome()" class="toolbar-btn">Home</button>');
}
);
function goHome() {
window.location.href = 'https://www.home-page.org/';
}
$( document ).ready(function() {
$('#productToolbar').append('<button onclick="contact()" class="toolbar-btn">Contact Us</button>');
}
);
function contact() {
window.location.href = 'https://www.home-page.org/contact/';
}
The CSS looks like this:
.toolbar-btn-group .toolbar-btn {
display: inline-block;
padding: 15px 25px;
font-size: 10px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #ffffff;
background-color: #780a29;
border: none;
float: left;
}
.toolbar-btn-group .toolbar-btn:hover {background-color: #490619
}
.toolbar-btn-group {
margin-left: 25%;
}
The output result is just generic buttons with no styling, and not on the screen where I want them (they're appended correctly, they just aren't sliding to the right due to the lack of CSS stlying). They function correctly, but that's it.
If I've understood my own code correctly, what's happening is that the JS is creating the buttons, assigning them as the toolbar-btn class, and appending them to the #productToolbar div. They are not receiving the .toolbar-btn CSS styling, because they are a child of the .toolbar-btn-group class.
What I don't know how to do though, is write JS code that will create the group of buttons with the requisite number of buttons that will receive the CSS styling (assuming it's possible).
The easiest solution, assuming this doesn't mess up other layout in the page, would be to add that .toolbar-btn-group class to the container while you're at it:
$(document).ready(function() {
$('#productToolbar').append('<button onclick="goHome()" class="toolbar-btn">Home</button>');
$('#productToolbar').append('<button onclick="contact()" class="toolbar-btn">Contact Us</button>');
$('#productToolbar').addClass('toolbar-btn-group'); // <-- here
});
.toolbar-btn-group .toolbar-btn {
display: inline-block;
padding: 15px 25px;
font-size: 10px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #ffffff;
background-color: #780a29;
border: none;
float: left;
}
.toolbar-btn-group .toolbar-btn:hover {
background-color: #490619
}
.toolbar-btn-group {
margin-left: 25%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="productToolbar"></div>
If that would cause problems -- i.e. if you don't want some or all of the toolbar-btn-group styling to affect the product toolbar -- you may need to just duplicate the CSS specifically for the product toolbar element:
#productToolbar .toolbar-btn {
display: inline-block;
padding: 15px 25px;
/* ...etc... */
}
Far from ideal, of course, but so's the whole situation. (I sympathize. Been there too.)
Good day all.
I've a page with a form, there is a option (a checkbox) that MUST be checked in order to submit the form, so basically there is a simple javascript like this:
function checkbox_tick_action (){
$("#mt-container #option").prop( 'checked',true );
$("#mt-container #option").attr('checked','checked');
console.log("ticked");
}
binded on the submit event.
This work pretty fine, but on some mobiles, the checkbox isn't updated, so this happen:
the form is submitted (the checkbox IS ticked, but shown as unticked).
landing on the next page, and hitting the back button, the checkbox is now showed as ticked.
I have done a number of test and I'm prett sure is a matter of "updating the DOM" or something that simply does not render the new "visual" of the checkbox.
anyone has a hint on how to solve this issue?
is there a way to force the render of an element, via js?
Note that this is actually working on most devices.
one of the devices that has this issue is Samsung ACE, using the stock browser.
all the phones that has this issue, are somehow dated.
the issue is present on android phones mostly, with 2.3.3 or less.
I have try this:
function checkbox_tick_action (){
$("#mt-container #option").prop( 'checked',true );
$("#mt-container #option").attr('checked','checked');
var opt = document.getElementById('option');
opt.style.display='none';
opt.offsetHeight;
opt.style.display='block';
console.log("tick 2");
with no luck actually.
the HTML is:
<input type="checkbox" name="option" id="option" value="true" data-tid="checkBox">
The CSS:
#mt-container input:not(checked) + label:before {
border: 1px solid #3E3E3E;
background-color: #EFEFEF;
content: "\00a0";
display: inline-block;
width: 14px;
height: 14px;
font-size:15px;
line-height: 15px;
}
#mt-container input:checked + label:before {
border: 1px solid #3E3E3E;
background-color: #EFEFEF;
color: #3E3E3E;
content: "\2714";
font-size: 15px;
text-align: center;
line-height: 15px;
font-weight: bold;
}
#mt-container input:checked, #mt-container input:not(checked) {
position:absolute;
top:-500px;
left:-900px;
}
If you are using Google material design, add "is-checked" class to element's
parent, as
$("#option").parent().addClass("is-checked");
to render visualisation. hope this will work!
I'm trying to animate a div in a Meteor template with TweenLite - I've installed the gsop package.
My template html:
<template name="mainInit">
<div id="teaContainer">
<h1>Tea</h1>
</div>
</template>
my helper:
$(document).ready(function(){
// If the user doesn't click on Tea within 3 seconds of arriving, hint at what lies beneath
console.log($("#teaContainer").width()); // <-- THIS RETURNS NULL -->
setTimeout(function () {
TweenLite.to($("#teaContainer"), 1, {css:{"margin":"25% auto auto auto"}, ease:Linear.none}); //this effects the correct div but no transition occurs instead it snaps to location
}, 3000);
});
My CSS, I'm using Bootstrap but also this file:
#teaContainer {
display: block;
width: 30%;
height: 30%;
margin: 65% auto auto auto;
color: white;
border: 1px blue solid;
}
#teaContainer h1 {
padding: 5% 5% 5% 5%;
text-align: center;
font-size: 7em;
color: black;
border: 1px #000 solid;
}
I get no errors but the transition doesn't happen, it snaps to the final location. Also it seems to move everything in the template instead of the specific target. If I log the div's width before the timer fires it returns null, otherwise if I log from within the timed function it returns the correct pixel width.
I'm totally lost, any ideas?
Thanks.
UPDATE: I've also tried to defer the function after the template is rendered. This fixes the null issue but doesn't stop the tween effecting everything in the yield.
Template.mainInit.rendered = function() {
console.log($("#teaContainer").width());
TweenLite.to($("#teaContainer"), 1, {css:{"margin":"25% auto auto auto"}, ease:Linear.none});
}
The answer came from the Greenock forum:
http://greensock.com/forums/topic/9575-using-greensock-with-meteor/
If you make the teaContainer a template, then you can just wire the tween to Template.teaContainer.rendered..
No?
I just tried it and it works for me. I'm using infinitedg:gsap Meteor package in 0.9.3
I made this tiny video (please ignore if background noises)
http://www.screenr.com/Qvts
its 13 seconds but only need to see the animation going on in second 5; (or go keepyourlinks.com and wait few seconds untill you can se the same box and click)
The css -the item has both clases-
.keepeos .top {
border-radius: 0.2em 0.2em 0.2em 0.2em;
color: #000066;
font-size: 40px;
height: 120%;
padding-bottom: 3px;
padding-top: 3px;
position: relative;
right: 10%;
top: -4px;
width: 120%;
}
.caja_con_sombra {
box-shadow: 0 0 4px rgba(0, 0, 0, 0.9);
}
And the javascript (posted the full script but commented on the only, in my opinion, relevant line.
<script type="text/javascript">
var variable;
function check_more(id){
var nID=$(".item_lista_links:first").attr("id"); //get the newest item's id
var tid= nID.replace('link', '');
$('#are_more').load('/includes/router.php?que=check_more&last='+tid+''); // check if newer
}
function buscar_nuevos(){
var nID=$(".item_lista_links:first").attr("id");
var id= nID.replace('link', '');
variable = setInterval('check_more('+id+')',15000); //start checking
}
function ver_nuevos(id){ // when found news and retrieving
clearInterval(variable);
$('#are_more').html(''); //clear div
/*THIS is basically the only relevant javascript line, i think */
$('#load_more').slideUp(100).load('/includes/router.php?que=load_more&last='+id+'',
function() {
variable = setInterval("check_more(139125)",15000);
$(this).slideDown(600); //start checking
return false;
});
}
</script>
So how can i prevent this shadow to expand the whole vertical animation?
I'm still not exactly sure what's going on, but I know how to fix it (at least for now). It might be due to the element sliding in mixed with a height issue in jquery for elements that are children in the sliding element, but I'm not sure. Either way:
Knowing that, here is a fix. In estilo.css , find
.keepeos {
height: auto;
}
Change that to:
.keepeos {
height: 18px;
}
This will work against you if that ever becomes multi-lined, so if you need to in the future, maybe you can switch the tag while sliding and then switch it back when it's done.