Adobe Community: Message List - How to - HTML / CSS / JavaScript

Re: Replace table codes with useLi in BC module template > online Shop Layouts

forums_noreply@adobe.com — Wed, 12 Nov 2014 21:45:05 GMT

Hi Liam,

Thanks for your knowledge and the solution works!

Thanks again.

Re: Showing and hiding dropdowns on product page, based on selected values

forums_noreply@adobe.com — Wed, 12 Nov 2014 18:11:28 GMT

Hi Machinette,

I apologise for not replying, I didn't receive any notification that there was a reply.

Re: Replace table codes with useLi in BC module template > online Shop Layouts

forums_noreply@adobe.com — Mon, 10 Nov 2014 07:11:22 GMT

Hi there,

You need to look at the tag information properly,

http://docs.businesscatalyst.com/dev-assets/reference#!/tag-reference/e-commerce/online-sh op-overall-layout.html

You will see it has a lot more components to it, you need to have the commas correctly, if you do not want to specify one of the components you just leave it blank.

EG - {tag_productlist,3,,24,Alphabetical,true,true}

Replace table codes with useLi in BC module template > online Shop Layouts

forums_noreply@adobe.com — Mon, 10 Nov 2014 05:23:40 GMT

I am having a problem in BC module template > online Shop Layouts:

Trying to get rid of Table Codes that inserted by BC system with List or possible Div
Contact with Adobe BC tech support, they suggest use this useLi tag in my online Shop Layouts. After I implement the codes below, and it doesn't work. The table code is still there on the front page:
- Here is the code that I implement in the module template:
  - {tag_productlist, useLi (true)}

Below is the front page codes, you can see the table is inserted by BC system:
- <table class="productTable productSmall"><tbody><tr><td id="catProdTd_9074914" class="productItem">
- </td><td class="productItem"></td><td class="productItem"></td><td class="productItem"></td></tr></tbody></table>

How could I remove the table that insert by BC System? Please help!!

Re: Showing and hiding dropdowns on product page, based on selected values

forums_noreply@adobe.com — Thu, 06 Nov 2014 07:39:31 GMT

Erased due to noone feedback from author

Bootstrap3/BC Menu dropdown conflict with module_photogallery

forums_noreply@adobe.com — Wed, 05 Nov 2014 16:56:25 GMT

I'm building a site using Bootstrap3 framework, with BC Dynamic Menu (with jQuery courtesy Joe Watkins) for main navigation. Dropdowns (click or hover) working beautifully until I add a photogallery module, then the dropdown links disappear on click, which is a major problem on touchscreens. I've removed all things piece-by-piece to determine the dropdown links disappear 100% of the time when a photogallery module is on the page, and work appropriately 100% of the time without a photogallery present (well, 1 exception - i'm seeing same issue on Layouts/OnlineShop/large_product.html).

Does anyone have any recommendations to fix this conflict with my Menu Nav dropdown links and the photogallery module? Really, really appreciate any suggestions. Unfortunately, the site nav is rendered non-functional on touchscreens due to these disappearing dropdown link conflicts (only Home and Smile Gallery links are not dropdowns).

EXAMPLES

Here are 3 examples of pages with a photogallery/dropdown conflict on click. To test issue, click the main nav dropdown links (e.g. "Locations, Treatment, etc":

Smile Gallery

Rapid City, SD

Spearfish, SD

I'm right in the middle of transitioning this site to the responsive framework, so not all links will work. Here are 3 examples of Nav links working properly on click (no photogallery module):

Results - Before & After

Evaluation

Smile For A Lifetime

REFERENCE

I do not understand jQuery very well, I've pieced together what I could to make it all work. Here are the 2 scripts I use to get the BC Menu to work:

// - - - - - Dropdown Menu v2 - JOE WATKINS.IO Dropdown Menu Toggle - - - - - - - - - - -

dropdownNavTweak : function(){

var $navContainer = $(".nav"),

$dropdownItems = $navContainer.find("li.dropdown");

$dropdownItems.each(function(){

var $parentItem = $(this).find("a:first");

$parentItem.addClass("dropdown-toggle").attr("data-toggle","dropdown").append(" <em class='icon-caret-down'></em>");

$(this).children("ul").removeClass().addClass("dropdown-menu");

$dropdownItems.show(); // shows dropdown images to prevent flicker - use CSS to hide " .nav li.dropdown {display:none;}" or ".navbar-nav li.dropdown {display:none;}" or ".navbarMinor-nav li.dropdown {display:none;}"

});

}, // end dropdownNavTweak (Comma needed if others follow}

... and ...

//////- -MENU- ////////

jQuery(document).ready(function ($) {

jQuery('.navbar .dropdown').hover(function() {

jQuery(this).addClass('extra-nav-class').find('.dropdown-menu').first().stop(true, true).delay(200).slideDown();

}, function() {

var na = $(this);

if (jQuery('.spanFloatLeftIfMobile').css('float') == "none") {

na.find('.dropdown-menu').first().stop(true, true).delay(500).slideUp('fast', function(){ na.removeClass('extra-nav-class') })

}

});

Hide background image on mobile device

forums_noreply@adobe.com — Mon, 03 Nov 2014 22:54:08 GMT

Hi all

I have a responsive site and I have a background image in my services page(s)

http://nicholsonssolicitors.davidcurran.com.au/about/services/Commercial

All looks fine on desktops and laptops, but when view on a mobile phone, the image displays behind the page content which doesn't look very nice. Is there a way to hide this background image on mobile devices only? i tried this below in my screen.css file, but no luck.

@media (max-width : 480px) {

body.custom-background {

background-image: none;

}

Or another workaround perhaps?......

Thanks

Re: custom blog list/post layout

forums_noreply@adobe.com — Mon, 03 Nov 2014 08:00:02 GMT

Didnt look much into liquid layouts, any idea about where to find proper and/or specific doc for this matter??

Re: custom blog list/post layout

forums_noreply@adobe.com — Mon, 03 Nov 2014 07:53:36 GMT

I think that is pretty close to as clean as it gets for this. You could try the new liquid layouts?

Re: custom blog list/post layout

forums_noreply@adobe.com — Mon, 03 Nov 2014 06:33:06 GMT

Thanks MRK,

More or less thats what I am doing.

Add an ID div on top of both layouts with a no src image, followed by posttitle, postpreview/postbody, author/date.

Since blog post preview renders post´s first div/p, I am giving this div an ID, img will be hidden in both layouts.

With js I am getting img src from the first div and pass it to top div.

It is a pretty tricky solution wich I dont really like, but it seems that its the only workaround for this matter.

Better solution will be appreciate.

Re: custom blog list/post layout

forums_noreply@adobe.com — Sun, 02 Nov 2014 22:34:46 GMT

Thinking about this you can put the content / image directly in the blog post and put a specific ID on a div or image and place it using CSS. This would mean including different CSS on your layout to blog post page.

By using this method you could also use javascript to populate a default image etc.

I think it sounds like you are on the right track.

Smaller banner/header size

forums_noreply@adobe.com — Sat, 01 Nov 2014 16:55:07 GMT

I need to make the header/banner smaller on my website.

https://ngaitahustore.worldsecuresystems.com/

I cannot work out where I would do this. Is anyone able to please help me?

Thanks in advance

custom blog list/post layout

forums_noreply@adobe.com — Sat, 01 Nov 2014 07:16:26 GMT

Hi,

Inside blog posts, have anyone tried to move a body image position with js to place it on top, followed by post´s title, post´s text body ?

Is the only possible solution that I found to solve blogs layout since there is no way to create a custom image filed within blog.

Thanks

Showing and hiding dropdowns on product page, based on selected values

forums_noreply@adobe.com — Wed, 29 Oct 2014 13:14:20 GMT

Hello.

I would like my product page to show different subsequent dropdowns based on individual dropdown values.

I've managed to achieve this via JavaScript, but I do not like how it works.

As far as I can tell, there is no proper identifier for each individual dropdown to determine which one it is, so all I can do at the moment is to rely on their order in the DOM, which is bad and makes it difficult for me to create a solution that would work for all products.

For instance, if the following is a single attribute:

<div class="catProductAttributeGroup" style="display: none;"><div class="catProdAttributeTitle">Metallic Foiling</div><div class="catProdAttributeItem"><select><option value="">-- Please select --</option><option value="6051720">Not required </option><option value="6051721">Foil ONE side + £45</option><option value="6051722">Foiling BOTH sides + £75</option></select></div></div>

I would like the outer-most div to have some sort of html attribute that holds the product attribute id. Something like, data-attribute-id="XXXXXXX". Is that possible?

Here's what I have up to this point:

I use {tag_attributes_json}, {tag_product_json} and {tag_currency} to get these values into javascript on page load, so I can use them later.

Then, I hook to change events of the drodpowns I have and then toggle their visibility based on which ones are selected. I rely on the jequery ':eq(n)' selector to achieve this, which I do not like. Is there an option for the {tag_attributes} helper which would make it add some extra information (such as attribute ID on the dropdown) on the generated HTML?

All of this works initially, but If I then 'Add to cart', the product element get's ajax-reloaded and the events are suddenly unhooked, so it doesn't work anymore. For that one, there are two options:

1. I could hook to an event that triggers once the product has been added to cart and the page is ready again. Is there such an event?

2. I could implement my own add to cart using bcInternals.shop.addToCart. I tried doing this, but I have two problems with it.

a. addToCart seems to add my selection twice, for some reason. Any ideas what I might be doing wrong?

b. the cart info in the top right corner doesn't refresh. it seems it tries to refresh, but there's some sort of access error in the script. This part is not yet fully added to the page, but there's a function that would do the adding to cart at the bottom of the bigger script block. Am I using the built in addToCart function incorrectly?

This is the page I have the partially implemented functionality added on:

Matt Laminated Business Cards

The scripts are currently embedded inside the HTML. Once I have it properly implemented, I'd like to extract it into a separate file. Search for "$productAttributesElement" to find the block with the functionality and for "productInfo" to find the part where I store the product data with the _json tags.

Re: How to change shopping cart Buy Now button?

forums_noreply@adobe.com — Mon, 27 Oct 2014 21:55:40 GMT

Beautiful! That worked. Thanks so much Alex:

Themes For Muse - Templates for Adobe Muse

One more question...The same thing is happening to me on another button at the top of the page here:

Elegant Restaurant Theme

I tried to amend your code, but I have a hard time understanding this stuff sometimes!

Any idea how I can give the second button a transparent background?

Thanks again Alex!

Re: How to change shopping cart Buy Now button?

forums_noreply@adobe.com — Sat, 25 Oct 2014 14:54:19 GMT

Replace with this in your stylesheet (index.css, line: 489):

input.productSubmitInput {background-color:transparent} div#buttonu398:hover {background-color:darkRed}

FlexNav Help

forums_noreply@adobe.com — Fri, 17 Oct 2014 13:28:57 GMT

Hey everyone. I am using FlexNav on a number of responsive sites, for the menu(in BC and elsewhere). It works great for multi-level navigation in a responsive design. An issue has recently been brought to my attention however.

Take this site as an example: Sunsweet

If you size the width down to 1000px you can see the menu switch to the flyout style. It works and everything, but you have to click twice on any of the arrows to get to as page's subpages. And if you are currently on a page, say Resources, and try clicking its arrow for the sub-menu, it will not pop out.

Any help with this would be much appreciated. Thanks.

Why are social links different on desktop vs. mobile versions of my site?

forums_noreply@adobe.com — Fri, 17 Oct 2014 02:09:03 GMT

The Facebook and Twitter buttons show up alongside the Favorite button on the desktop version of my site, but not on the phone version of the site, and I can't find the place to correct this. Thoughts? Desktop screenshot of sample product vs Mobile screenshot of same product below.

can ANYONE please help with coding query?

forums_noreply@adobe.com — Wed, 15 Oct 2014 12:00:06 GMT

Im currently setting a website up in Adobe Muse/BC - Im not a developer at all!..but a designer and really like this software. However ive come across whats probably quite a simple problem - i just need to put some the module output from my web app over an image on template page but i dont know how to do it.

The page is here:

latest

The text and image im moving (this is web app outputt) is inserted into the page coding as:

{tag_pagecontent}

This is a module that Adobe BC is placing on the page from my web app.

Ive done images to explain this far more clearly:

http://www.paulsuttontestsite.co.uk/test.SHOT1.png

http://www.paulsuttontestsite.co.uk/test.SHOT2.png

Many thanks in advance to anyone who is kind enough to offer their time in helping me.

Paul

Incrementing product count in "add to cart" input field

forums_noreply@adobe.com — Wed, 15 Oct 2014 09:47:44 GMT

Hi,

I want to add a couple of buttons near the "add to cart" quantity input field (which you can normally use to write a number within and select the quantity for the product you want to buy), say a "+" and a "-" button, to increment or decrement the number within the field. This would be really simple in javascript, but how can I access the DOM at that input field level? It seems I can not access the input field in {tag_addtocartinputfield}.

Is there a way to achieve it, or a sort of workaround?

Re: Why does my website scroll across?

forums_noreply@adobe.com — Mon, 13 Oct 2014 23:30:14 GMT

Happy to help!

Help with incorrect menu navigation when returning web app detail layout

forums_noreply@adobe.com — Sun, 12 Oct 2014 21:11:20 GMT

Ive managed to sort out most of my problems with my web app - however now the main problem is this:

My website is: www.paulsuttontetstsite.co.uk

1. My web app has the url /rehomedogs, so when the results are listed it displays: www.paulsuttontestsite.co.uk/rehomedogs/(name of dog)

However because the menu has been generated in Muse...its now incorrect on this page as clicking on home is trying to automically link to www.paulsuttontestsite.co.uk/rehomedogs/index...rather than www.paulsuttontestsite.co.uk/index

Please can someone tell me which is the best way to go about changing the navigation on the menu?

I havent had any luck with questions on these forums unfortunately

Thankyou if anyone can help out

Paul

Re: Why does my website scroll across?

forums_noreply@adobe.com — Sun, 12 Oct 2014 14:54:44 GMT

Thanks so much Ryan. Also looks like I needed to change it in the styles.css as well.

Again thank you so much.

Re: Why does my website scroll across?

forums_noreply@adobe.com — Fri, 10 Oct 2014 18:48:30 GMT

The problem is your "Products" dropdown width. Anyways if you add overflow:hidden, it will fix the problem.

.top-bar-section .dropdown {

position: absolute;

left: 100%;

top: 0;

visibility: hidden;

z-index: 999;

overflow: hidden;

}

.top-bar-section .dropdown {

position: absolute;

left: 100%;

top: 0;

visibility: hidden;

z-index: 999;

overflow: hidden;

}

-Ryan

Creating an email in GoLive CS2

forums_noreply@adobe.com — Thu, 09 Oct 2014 16:05:13 GMT

Using GoLive CS2 I am creating an email. It is html text on top of an image. Outlook separates the two and displays the text below the image instead of layered on top. How can I sort this?

Why does my website scroll across?

forums_noreply@adobe.com — Thu, 09 Oct 2014 13:37:51 GMT

I can't seem to work out why it is scrolling across

I am using the Church Template on BC and the screen width doesn't seem to sit right.

Home - Website with issues

Home- Testing site that I'm using to compare against

I need the Alpha header to be 60px high to match the header titles so this might be playing a part in the issue?

What have I done to make the width too large for the screen and create a marquee effect?

Thanks

Changing product images via Dropdown (JScript)

forums_noreply@adobe.com — Tue, 07 Oct 2014 22:39:50 GMT

Hi - I am developing a clothing store. I have several products that have different colour options - I want the product image to change as the user selects the various colour options via the drop down menu in Business Catalyst - I've been told this can be done with Javascript... can anyone help! ?

How to change shopping cart Buy Now button?

forums_noreply@adobe.com — Tue, 07 Oct 2014 19:24:57 GMT

Hello All,

I've been racking my brain on this one and could really use some help!

Check out the "BUY NOW" button on my website here:

Themes For MuseHome

How do I get rid of the grey/white color behind the text? (it's grey on one browser, white on another!)

I want it to be a solid red button and would like the gray area to be transparent.

I looked in a lot of the css files but can;t figure out which style matches up with this button.

Does anyone know where I'm supposed to go to change this?

Any help would be greatly appreciated. Thanks!

Jason

Re: Is it possible to use math.random to generate web app item name?

forums_noreply@adobe.com — Tue, 30 Sep 2014 14:37:03 GMT

I think I figured it out. If anybody is interested:

var i=Math.random();

document.getElementById('ItemName').value=i;

</script>

I should add that if you are trying to do this, be sure to place your script AFTER the element you want to be pre-populated. Otherwise, the script will run before the item loads and it won't work.

Is it possible to use math.random to generate web app item name?

forums_noreply@adobe.com — Tue, 30 Sep 2014 13:54:01 GMT

Can math.random() be used to auto fill the name field of a web app item? I have a client that needs web app item submissions to be random and we don't want to ask the user to have to create a name for their submission.

Help fixing sidebar border in page template

forums_noreply@adobe.com — Mon, 29 Sep 2014 06:33:54 GMT

I have recently added a blog to a website: www.mindsaligned.com.au/into-minds. I wanted the blog to have a sidebar similar to other pages on the site, so I just copied a page template from a page that has a sidebar and renamed the template "Blog Template". I've assigned the blog template to the actual blog and everything looks great except for one issue...

The sidebar (the area that contains "categories", "recent posts", etc) is meant to have a left border going all the way up the body of the page (just like it is on this page: www.mindsaligned.com.au/events), however, you'll notice on the blog, the left border is only showing up a little bit toward the bottom of the page body.

I inspected the element using Firebug and noticed that the entire sidebar section (possibly div?) seems to have shifted down on the page, hence, the left border moving down as well. I went into the page template I created for this page to see if I could find the issue in the HTML. This is what the HTML looks like for that section:

<div class="main-inner2">{tag_pagecontent}

</div>

I tried moving the "{tag_pagecontent}" tag after the first closing "</div>" tag and that seems to solve the border issue, but it creates another issue where the sidebar links no longer work (I can't even highlight any of the text in the sidebar with my cursor).

Can anyone tell me what I'm doing wrong and how I can fix this issue? I have basic knowledge of HTML and CSS so if you have a solution, please simplify for me as best as you can in your responses.

Thanks!

Nicole

Re: Help changing color of menu in Adora template

forums_noreply@adobe.com — Fri, 26 Sep 2014 06:16:59 GMT

Hello

Excuse me I am not connected very often.

You have to go in develop > css > styles.css

modulestylesheets.css is made for modules templates as forum, blog, ...

Have a nice day

Re: Help with drop down menu and border on images

forums_noreply@adobe.com — Tue, 23 Sep 2014 23:57:44 GMT

thank you! i appreciate your help

Re: Help with drop down menu and border on images

forums_noreply@adobe.com — Tue, 23 Sep 2014 23:11:48 GMT

As a tip to dropdown Menu's or just positioning in general.

If you want to ensure a good bottom position with an absolute element - top:100%; is all you need rather then being specific.

Re: Help with drop down menu and border on images

forums_noreply@adobe.com — Tue, 23 Sep 2014 22:16:01 GMT

Sure. On line 256 of your style.css change the background to background:none; currently it is white.

Re: Help with drop down menu and border on images

forums_noreply@adobe.com — Tue, 23 Sep 2014 18:55:29 GMT

thank you so much! can you help with taking the border off the picture and add to cart thing:

marketingsource.businesscatalyst.com/directory-of-associations-by-the-state-online/us_dire ctory_of_associations_by-the-state_online_access_alabama

Re: Help with drop down menu and border on images

forums_noreply@adobe.com — Tue, 23 Sep 2014 18:28:24 GMT

If you do include the superfish menu script, then you will notice little arrows in your menu items. To fix these change line 956 of your style.css file to right: 10px; and line 975 to top:1.2em;

Re: Help with drop down menu and border on images

forums_noreply@adobe.com — Tue, 23 Sep 2014 18:26:08 GMT

I also noticed you are using superfish menu. If you want the menu to appear slower then place this code in right before the ending </head> tag.

$(document).ready(function(){

$('ul#nav_14623').superfish();

});

</script>

Re: Help with drop down menu and border on images

forums_noreply@adobe.com — Tue, 23 Sep 2014 18:19:33 GMT

On Line 927 of your style.css file change "51" to "48".

It should look like this.

#navigation ul li:hover ul, #navigation ul li.sfHover ul {

left: 0;

top: 48px;

/* match top ul list item height */

z-index: 99; }

Re: Help with drop down menu and border on images

forums_noreply@adobe.com — Tue, 23 Sep 2014 17:00:33 GMT

our website is marketingsource.businesscatalyst.com/

Re: Help with drop down menu and border on images

forums_noreply@adobe.com — Fri, 19 Sep 2014 03:34:09 GMT

If you can, please provide a link to your website that you are having issues on.

Re: Javascript ? - Multiply # of products by 3 for tally / Spend $xx more for free shipping

forums_noreply@adobe.com — Fri, 19 Sep 2014 03:29:12 GMT

The first question I have to ask before attempting to answer question #1 is - Do you want this counter to be available during the "session" only? Meaning only available to the user while he/she is purchasing products? So if the user purchases products, and then comes back another day to purchase more, the counter is reset?

As far as question #2 is concerned, this is possible.

Help with drop down menu and border on images

forums_noreply@adobe.com — Thu, 18 Sep 2014 17:59:02 GMT

How do you slow down the drop down menu? When we hover over it and then try to go down to a sub page it goes away.

Also, I need help with getting a white border off images in the cart, I'm assuming its in the css style. I just don't know where. I am not really familiar with code. I know I have to change it to padding: 0px;

Thank you

Re: Are the paths correct for this third party css and js links?

forums_noreply@adobe.com — Thu, 18 Sep 2014 05:47:44 GMT

Do not use jQuery latest on live sites:

http://blog.jquery.com/2014/07/03/dont-use-jquery-latest-js/

It was never intended for what your using it for and you can see from the official blog this will not be updated any more.

Do not use it as a CDN like you are.

Re: Are the paths correct for this third party css and js links?

forums_noreply@adobe.com — Thu, 18 Sep 2014 04:17:53 GMT

Interesting... They look fine to me. Can you provide a link? if not, just add https: before the // in each script.

Re: Can someone tell me how to use jquery to replace the "No one logged in" message generated from {modu

forums_noreply@adobe.com — Thu, 18 Sep 2014 04:08:18 GMT

Let me add that you also need to add a css rule for "user-" as well. Sometimes the system does not display the "0"

.user-,.user-0{display:none}

Re: Can someone tell me how to use jquery to replace the "No one logged in" message generated from {modu

forums_noreply@adobe.com — Fri, 12 Sep 2014 00:37:55 GMT

Thanks for this discovery, I've been pulling my hair out to get a logged-in / not-logged-in dynamic driving some basic content

Is it true I would need to adopt a javascript method to include a link to my sign in page in the 0 content " " ?

thanks so much

Turning HTML image into PNG

forums_noreply@adobe.com — Thu, 11 Sep 2014 14:11:56 GMT

Hi,

I don't think this will work but before I give up entirely I decided that I should ask people who would know more than me. I created a HTML image through work's photoshop cs4 to be uploaded onto our Linkedin pages' hero image. However, LinkedIn does not support html images but it does support png. Is there a way that I can convert the html file into png and still make it clickable?

I hope this makes sense

Thanks,

Nash

Re: BC Gurus responsive template slider

forums_noreply@adobe.com — Tue, 09 Sep 2014 15:31:49 GMT

Megan has the correct answer. For BC Gurus related template issues, please submit a support ticket here: Submit a ticket : BC Gurus

In-content Editor image keeping ?action=thumbnail

forums_noreply@adobe.com — Tue, 09 Sep 2014 11:55:39 GMT

Hello all,

I've been working on a few BC projects now and found the '?action=thumbnail&width=600&height=300&algorithm=fill_proportional' that you can add onto images really useful in helping keep site design - mainly it means clients do not need to upload images with exact dimensions to keep things consistent.

However, when you add the In-content Editor attribute 'ice:editable="image"' and replace the image via the front end Edit screen the '?action=thumbnail&width=600&height=300&algorithm=fill_proportional' will be removed from the image's path and therefore break design / consistency. Is there anyway to stop this from happening?

Regards,
Mat