Adobe Community : Popular Discussions - How to - HTML / CSS / JavaScript

Solution: Scripts not working after Ajax replaces part of page

forums_noreply@adobe.com — Wed, 18 Apr 2012 23:10:40 GMT

I'm far from an expert at js and jQuery, so I welcome collaboration and corrections on this solution. This is all from the context of a catalog's large product view when using ajax to switch between grouped products.

First, the issue:

BC updates the product information via an ajax call when you click the 'add to cart' button or make selections between product groupings.
When BC does this, it entirely reloads page_content.html. The net result: all the script bindings that were attached to those tags are wiped out.
The scripts are never rebound to the tags because that initially occurs when the DOM is being created. Content changes via an ajax call don't recreate the DOM.

Possible solutions:

Hardcode the affected scripts inside page_content.html. Don't just link a script file to it. It has to be hardcoded. This is not recommended, as it is bad coding practice to place scripts inline with our html.
Avoid the use of scripts in that area (good luck).
Use delegation with .on() to rebind. I believe this is the best option, and it's the one I am going to demonstrate.

To avoid inline scripts, I like using an external script.js file. It keeps my document clean from script clutter and it's easier to manage my scripts. Also, I want a solution I can implement one time, in one place, instead of with every situation I encounter. Below is an example of how my scripts are organized. The areas in bold are the specific solution.

jQuery.noConflict();

function scriptlist() {

var $ = jQuery;

var Engine = {

utils : {

functionName : function(){

// Do stuff in here

functionName2 : function(){

// do something else

}

ui : {

functionName : function(){

// Do stuff in here

functionName2 : function(){

// do something else

}

};

if ( $(element).length ) { Engine.utils.functionName(); }

if ( $(element2).length ) { Engine.utils.functionName2(); }

if ( $(element3).length ) { Engine.ui.functionName(); }

if ( $(element4).length ) { Engine.ui.functionName2(); }

};

jQuery('body').on('click.productSubmitInput', function(){

jQuery.ready(scriptlist());

});

scriptlist();

The key here was the use of the .on() jQuery method. Here is how it works:

I attached on() to the body element on the page with jQuery('body').on()
It's attached to the body, because the body is outside of page_content.html and won't have it's binding removed during the ajax call. Events register all the way up their ancester elements on the page, so on() can pick up the event all the way up to the body.
Told it to look for a certain event: 'click.productSubmitInput'
When the event occurs, it should trigger ready() to refresh the DOM. jQuery.ready()
and run my functions against it, thereby rebinding my document.

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.

New Bootstrap 3 Navbar plugin for BC Community.

forums_noreply@adobe.com — Sun, 07 Sep 2014 18:08:25 GMT

Hello everyone!

I have just finished creating a plugin that will set up all the settings in order to make Bootstrap Navbar work without having to hassle with CSS & Javascript, or having to

add the class "dropdown" for each dropdown menu inside Dynamic Menu manager at the backend. It also lets you to choose between toggle and hover on the dropdown menu. So if you client changes his/her mind you just

change the property "dropdownToggle" to false.

If you can optimise to speed it up feel free to do so, just make sure you share it here afterwards.

Download the plugin here http://www.it-amigo.se/LiteratureRetrieve.aspx?ID=131498

Instrucitons

Just add the plugin as any JQuery plugin and then add the following code to your html document.

$('#top_navbar').bootstrapNav({

// Dropdown Choice: Toggle(Bootstrap Default) = true, Hover Dropdown = false.

dropdownToggle: true,

// At what point should navbar go back to Toggle for Mobile Devices.

breakpoint: 1199

});

Tutorial Video

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!!

How to grab CSS styles from Muse and insert them into Business Catalyst Blog and News

forums_noreply@adobe.com — Sun, 26 Jan 2014 22:16:56 GMT

Hey guys! I got into a problem, hope you can give me a hand!

A couple of months ago I saw this tutorial: http://tv.adobe.com/watch/learn-business-catalyst/adding-business-catalyst-features-to-you r-muse-sites/

where it showed how to grab CSS styles from Muse and insert them into Business Catalyst to give styles to the Blog and same to the News.

Basically what it was it's you set in Muse a "mockup page" where you show with muse native text how the Blog and News would look like, then you preview the page in your browser and give "Inspect Element" to the text body, the event text and such and such. When "Inspect Element" showed you div and styles you then would grab the styles that were set to that text, the main thing is that inside the main div it would go like: <h3 id="u2526-3" class="H3-Page-Subheading" and then Bodytext-SourceSansPro="Be the best you can be". So back in Business Catalyst you would go to Develop tab and got to the CSS sheet of the modules which is: "modulestylesheet.css" and set the following: .H3 Page Subheading and the CSS styles, saying give this styles to all subheading in the page that is H3.

Now muse gave you that specifications, the thing is that it doesn't give it anymore, it gives the styles but it doesn give weather it's H3 subheading or H5 Heading, so I don't know how to tell Business Catalyst to give the styles to what class... Does anyone know how to fix this.

A friend of mine gave me an alternative which was modify the "styles" from the Module Layout, the thing is that in the module layout you can only use WebSafe Fonts and doing it by CSS Styles it respected if there was Typekit Fonts involved.

I really would aprecciate the help guys! Thanks!

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

Search box with dropdown display of results

forums_noreply@adobe.com — Tue, 01 Oct 2013 18:36:27 GMT

I'm looking to modify the Search module functionality (or create a web app?) that is used in sites like help.adobe.com . I would like the search function to work like this... As a person types in a search term, a dropdown box shows results that match the text as it is typed in letter by letter. A person can then click one of the displayed results at any time or click a search icon to see the page of all matching results.

I've looked around the forum to see if somebody has done this already but can't see that they have. I assume a Javascript at a minimum might be required (not a developer myself). Anybody familiar with how to accomplish that?

Dynamic Menu Selected Class

forums_noreply@adobe.com — Thu, 14 Aug 2014 14:53:46 GMT

Hey everyone,

On the site I am working on here http://sunsweetuk.wsiefusion.net/ you can see right away the "About Us" menu item has the selected class turned on, even though it isn't the selected page.

If you go to this page: http://sunsweetuk.wsiefusion.net/sunsweet-story you can see it turns off...However if you select any menu item after About Us the About Us item keeps the "selected" class turned on.

I cannot quite figure out what is going on here. I do have 'flexnav' js added onto this site, as it is responsive. Any help would be appreciated. Thanks.

Regards, Brian Richards

template bumping head content holders to body

forums_noreply@adobe.com — Wed, 13 Aug 2014 21:36:51 GMT

I am trying to place content holders for scripts, queries and meta tags in the head of the template, but after I've saved the template, it bumps them to the body. What am I doing wrong or what should I be doing differently?

how can i create my BC featured product list in to a slide show for multiple products in one row. i have products aligned in a row i just would like to make it a slide show of the multiple (20) products.

forums_noreply@adobe.com — Mon, 19 May 2014 23:11:45 GMT

i have products aligned in a row already using custom css.i just would like to make it a slide show of the multiple (20) products in the one row.

i am using the featured product module from the development section of business catalyst. i would love to display as many new products as possible in one row of products. so i can just click a arrow left button and scroll through the products.

holy-shippers.businesscatalyst.com is the site i am mentioning.

Work around for adding 'poplet' images to a product

forums_noreply@adobe.com — Thu, 17 Apr 2014 00:36:42 GMT

What I am trying to avoid is manually entering poplet image paths for each product in the online store. I have a PHP solution, but that obviously won't work (no server side coding).

Ideally it would look something like:

Look in folder: {tag_productcode}

Pull all image paths

Insert into <img> tags

Insert into html

I'm probably dreaming here, but does anyone know of a work around to making something like this happen?

Help changing color of menu in Adora template

forums_noreply@adobe.com — Wed, 23 Oct 2013 16:25:23 GMT

I'm a new BC user and have been scouring the CSS stylesheet for the Adora template, but I can't figure out where the color is being set for the main menu. I was able to change the navigation.png image to be solid instead of transparent and that covers the maroon/red color, but you can still see it peaking around the edges in some browsers, or full-on during page refresh, before the png image loads. Additionally, I added a sub-menu and the maroon/red color is back. The site is www.digitalglobesystems.com

Can anyone point me to the location of where the color is being set in the stylesheet? I've done a lot of trial and error with no results. Another thread said the color was set in the spry assets, but I don't see that in my File Browser.

ASCII characters showing as code in form validation

forums_noreply@adobe.com — Wed, 25 Sep 2013 17:09:20 GMT

Hi,

I was building a version of a web form in Spanish, and in the front end validation all the ASCII characters for the accented letters are showing up as code.

Also, I wanted the names to go into the CRM like the typically do, so I used the First Name, Last Name fields and just changed the label. However these show up in the alert as "First Name" and "Last Name".

Any ideas about how to solve these issues?

Thanks,

Jeff

Is it possible to Resort Items on price?

forums_noreply@adobe.com — Wed, 14 Aug 2013 14:33:15 GMT

My client INSISTS on having a sort function on the catalog display page, to be able for the customer to re-sort the items by price.

The search feature does not re-sort the current page, but creates a new page of results.

I am wondering if it is even possible to do, because on the overall catalog module template, there isn't an area where you can call the tag_price for the individual items in the catalog. And then, even if you could put a sort button on the page and it could work, would it then re-sort the multiple pages of a large catalog or only the current page?

In php a dynamic call to the database allows for a resorting of the display, but javascript relies on the values of the dispayed page, and the tag_price appears on the small item template not in the catalog template...

10:19 am We are currently sorting by price {tag_productlist,4,,12, price desc,,true}, but we need the option to allow the customer to resort from low to high for the same catalog display or in search results.

Using jQuery Datepicker on form

forums_noreply@adobe.com — Mon, 12 Aug 2013 16:43:40 GMT

I have a form whos results are passed onto another website. The problem I'm having is getting my date fields to work using jQuery datepicker. My popup calendar is not appearing. If I manually add dates the form works fine. I implemented the $j suggested in KB. Is BC conflicting with this function? How can I get the datepicker to be same as internal BC forms.

Here's my code to reference scripts

$j = jQuery.noConflict();

Date.format = "mm/dd";

$j(function()

{

$j(".date-pick").datePicker()

});

</script>

<tbody>

<tr>

<td colspan="2" valign="top" style="height: 45px;">Check-in Date<br />

</tr>

<tr>

<td colspan="2" valign="top" style="height: 45px;">Check-out Date<br />

</tr>

<tr>

<td style="height: 45px;">Adults<br />

</select></td>

<td style="height: 45px;">Children (0-12)<br />

</select></td>

</tr>

<tr>

<option>Best Available</option>

<option value="SSR">Senior/AARP Rate</option>

<option value="SGV">Government Rate</option>

</select></td>

</tr>

<tr>

</tr>

</tbody>

</table>

</form>

change hand cursor to a magnifying glass

forums_noreply@adobe.com — Thu, 16 May 2013 04:57:09 GMT

Does anyone know how I can change the hand cursor to a magnifying glass on mouse-over? Needs to be cross-browser compatible! To be used on the large image in the Individual Product - Large template as in the following example: http://meluka.businesscatalyst.com/bedroom/underbed-storage-1/underbed-storage-2#

og image not appearing in FaceBook

forums_noreply@adobe.com — Mon, 15 Apr 2013 20:17:42 GMT

Open graph tag doesn't appear to be working. When adding the url to a FaceBook post the og image is not appearing. Any help is appreciated. Thanks!

site: http://www.crowsnestnewport.com/

(<meta property="og:image" content="http://crowsnestnewport.com/images/cn-logo-share.png" />)

css height property application on fluid grid layout

forums_noreply@adobe.com — Wed, 12 Dec 2012 11:30:52 GMT

Hi, I'm totally new to fluid grid layout and just got started in it. I have a div tag that has 5px height and I sucessfully applied that and seem fine only on Tablet landscape (1024x768) and Small tablet landscape (800x600), nevertheless it isn't even displaying on Mobile portrait (320x480), Mobile landscape (480x320), Small tablet portrait (600x800) and Tablet portrait (768x1024).

My coding is below

index.html

<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="fluid.grid.layout/boilerplate.css" rel="stylesheet" type="text/css">
<link href="fluid.grid.layout/style.css" rel="stylesheet" type="text/css">
<!-- 
To learn more about the conditional comments around the html tags at the top of the file:
paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/


Do the following if you're using your customized build of modernizr (http://www.modernizr.com/):
* insert the link to your js here
* remove the link below to the html5shiv
* add the "no-js" class to the html tags at the top
* you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build 
-->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="fluid.grid.layout/respond.min.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
  <div id="LayoutDiv1"></div>
</div>
</body>
</html>

boilerplate.css

@charset "utf-8";
/*
/* 
 * HTML5 ✰ Boilerplate
 *
 * What follows is the result of much research on cross-browser styling. 
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 *
 * Detailed information about this CSS: h5bp.com/css
 * 
 * Dreamweaver modifications:
 * 1. Commented out selection highlight
 * 2. Removed media queries section (we add our own in a separate file)
 *
 * ==|== normalize ==========================================================
 */




/* =============================================================================
   HTML5 display definitions
   ========================================================================== */


article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }


/* =============================================================================
   Base
   ========================================================================== */


/*
 * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
 * 2. Force vertical scrollbar in non-IE
 * 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
 */


html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }


body { margin: 0; font-size: 13px; line-height: 1.231; }


body, button, input, select, textarea { font-family: sans-serif; color: #222; }


/* 
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate
 * Also: hot pink! (or customize the background color to match your design)
 */


/* Dreamweaver: uncomment these if you do want to customize the selection highlight
 *::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
 *::selection { background: #fe57a1; color: #fff; text-shadow: none; }
 */


/* =============================================================================
   Links
   ========================================================================== */


a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }


/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }




/* =============================================================================
   Typography
   ========================================================================== */


abbr[title] { border-bottom: 1px dotted; }


b, strong { font-weight: bold; }


blockquote { margin: 1em 40px; }


dfn { font-style: italic; }


hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }


ins { background: #ff9; color: #000; text-decoration: none; }


mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }


/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }


/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }


q { quotes: none; }
q:before, q:after { content: ""; content: none; }


small { font-size: 85%; }


/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }




/* =============================================================================
   Lists
   ========================================================================== */


ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }




/* =============================================================================
   Embedded content
   ========================================================================== */


/*
 * 1. Improve image quality when scaled in IE7: h5bp.com/d
 * 2. Remove the gap between images and borders on image containers: h5bp.com/e 
 */


img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }


/*
 * Correct overflow not hidden in IE9 
 */


svg:not(:root) { overflow: hidden; }




/* =============================================================================
   Figures
   ========================================================================== */


figure { margin: 0; }




/* =============================================================================
   Forms
   ========================================================================== */


form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }


/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }


/* 
 * 1. Correct color not inheriting in IE6/7/8/9 
 * 2. Correct alignment displayed oddly in IE6/7 
 */


legend { border: 0; *margin-left: -7px; padding: 0; }


/*
 * 1. Correct font-size not inheriting in all browsers
 * 2. Remove margins in FF3/4 S5 Chrome
 * 3. Define consistent vertical alignment display in all browsers
 */


button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }


/*
 * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
 * 2. Correct inner spacing displayed oddly in IE6/7
 */


button, input { line-height: normal; *overflow: visible; }


/*
 * Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7
 */


table button, table input { *overflow: auto; }


/*
 * 1. Display hand cursor for clickable form elements
 * 2. Allow styling of clickable form elements in iOS
 */


button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }


/*
 * Consistent box sizing and appearance
 */


input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }


/* 
 * Remove inner padding and border in FF3/4: h5bp.com/l 
 */


button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }


/* 
 * 1. Remove default vertical scrollbar in IE6/7/8/9 
 * 2. Allow only vertical resizing
 */


textarea { overflow: auto; vertical-align: top; resize: vertical; }


/* Colors for form validity */
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }




/* =============================================================================
   Tables
   ========================================================================== */


table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }




/* ==|== primary styles =====================================================
   Author: 
   ========================================================================== */
































/* ==|== non-semantic helper classes ========================================
   Please define your styles before this section.
   ========================================================================== */


/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }


/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }


/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }


/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }


/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }


/* Contain floats: h5bp.com/q */ 
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }




/* ==|== print styles =======================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

 @media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}

style.css

@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
          max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
          width:100%;
}


/*
          Dreamweaver Fluid Grid Properties
          ----------------------------------
          dw-num-cols-mobile:                    4;
          dw-num-cols-tablet:                    8;
          dw-num-cols-desktop:          10;
          dw-gutter-percentage:          25;
  
          Inspiration from "Responsive Web Design" by Ethan Marcotte 
          http://www.alistapart.com/articles/responsive-web-design
  
          and Golden Grid System by Joni Korpi
          http://goldengridsystem.com/
*/


/* Mobile Layout: 480px and below. */


.gridContainer {
          margin-left: auto;
          margin-right: auto;
          width: 85.5%;
          padding-left: 2.25%;
          padding-right: 2.25%;
}
#LayoutDiv1 {
          clear: both;
          float: left;
          margin-left: 0;
          width: 100%;
          height:5px;
          display: block;
}


/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */


@media only screen and (min-width: 481px) {
.gridContainer {
          width: 97.5%;
          padding-left: 1.25%;
          padding-right: 1.25%;
}
#LayoutDiv1 {
          clear: both;
          float: left;
          margin-left: 0;
          width: 100%;
          height:5px;
          display: block;
}
}


/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */


@media only screen and (min-width: 769px) {
.gridContainer {
          width: 98%;
          max-width: 1232px;
          padding-left: 1%;
          padding-right: 1%;
          margin: auto;
}
#LayoutDiv1 {
          clear: both;
          float: left;
          margin-left: 0;
          width: 100%;
          display: block;
          height:5px;
          background-color:#FBB829;
}
}

respond.min.js

/*! Respond.js v1.0.1pre: min/max-width media query polyfill. (c) Scott Jehl. MIT/GPLv2 Lic. j.mp/respondjs  */
(function(e,h){e.respond={};respond.update=function(){};respond.mediaQueriesSupported=h;if(h){return}var u=e.document,r=u.documentElement,i=[],k=[],p=[],o={},g=30,f=u.getElementsByTagName("head")[0]||r,b=f.getElementsByTagName("link"),d=[],a=function(){var B=b,w=B.length,z=0,y,x,A,v;for(;z<w;z++){y=B[z],x=y.href,A=y.media,v=y.rel&&y.rel.toLowerCase()==="stylesheet";if(!!x&&v&&!o[x]){if(y.styleSheet&&y.styleSheet.rawCssText){m(y.styleSheet.rawCssText,x,A);o[x]=true}else{if(!/^([a-zA-Z]+?:(\/\/)?)/.test(x)||x.replace(RegExp.$1,"").split("/")[0]===e.location.host){d.push({href:x,media:A})}}}}t()},t=function(){if(d.length){var v=d.shift();n(v.href,function(w){m(w,v.href,v.media);o[v.href]=true;t()})}},m=function(G,v,x){var E=G.match(/@media[^\{]+\{([^\{\}]+\{[^\}\{]+\})+/gi),H=E&&E.length||0,v=v.substring(0,v.lastIndexOf("/")),w=function(I){return I.replace(/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,"$1"+v+"$2$3")},y=!H&&x,B=0,A,C,D,z,F;if(v.length){v+="/"}if(y){H=1}for(;B<H;B++){A=0;if(y){C=x;k.push(w(G))}else{C=E[B].match(/@media ([^\{]+)\{([\S\s]+?)$/)&&RegExp.$1;k.push(RegExp.$2&&w(RegExp.$2))}z=C.split(",");F=z.length;for(;A<F;A++){D=z[A];i.push({media:D.match(/(only\s+)?([a-zA-Z]+)(\sand)?/)&&RegExp.$2,rules:k.length-1,minw:D.match(/\(min\-width:[\s]*([\s]*[0-9]+)px[\s]*\)/)&&parseFloat(RegExp.$1),maxw:D.match(/\(max\-width:[\s]*([\s]*[0-9]+)px[\s]*\)/)&&parseFloat(RegExp.$1)})}}j()},l,q,j=function(E){var v="clientWidth",x=r[v],D=u.compatMode==="CSS1Compat"&&x||u.body[v]||x,z={},C=u.createDocumentFragment(),B=b[b.length-1],w=(new Date()).getTime();if(E&&l&&w-l<g){clearTimeout(q);q=setTimeout(j,g);return}else{l=w}for(var y in i){var F=i[y];if(!F.minw&&!F.maxw||(!F.minw||F.minw&&D>=F.minw)&&(!F.maxw||F.maxw&&D<=F.maxw)){if(!z[F.media]){z[F.media]=[]}z[F.media].push(k[F.rules])}}for(var y in p){if(p[y]&&p[y].parentNode===f){f.removeChild(p[y])}}for(var y in z){var G=u.createElement("style"),A=z[y].join("\n");G.type="text/css";G.media=y;if(G.styleSheet){G.styleSheet.cssText=A}else{G.appendChild(u.createTextNode(A))}C.appendChild(G);p.push(G)}f.insertBefore(C,B.nextSibling)},n=function(v,x){var w=c();if(!w){return}w.open("GET",v,true);w.onreadystatechange=function(){if(w.readyState!=4||w.status!=200&&w.status!=304){return}x(w.responseText)};if(w.readyState==4){return}w.send(null)},c=(function(){var v=false;try{v=new XMLHttpRequest()}catch(w){v=new ActiveXObject("Microsoft.XMLHTTP")}return function(){return v}})();a();respond.update=a;function s(){j(true)}if(e.addEventListener){e.addEventListener("resize",s,false)}else{if(e.attachEvent){e.attachEvent("onresize",s)}}})(this,(function(f){if(f.matchMedia){return true}var e,i=document,c=i.documentElement,g=c.firstElementChild||c.firstChild,h=!i.body,d=i.body||i.createElement("body"),b=i.createElement("div"),a="only all";b.id="mq-test-1";b.style.cssText="position:absolute;top:-99em";d.appendChild(b);b.innerHTML='_<style media="'+a+'"> #mq-test-1 { width: 9px; }</style>';if(h){c.insertBefore(d,g)}b.removeChild(b.firstChild);e=b.offsetWidth==9;if(h){c.removeChild(d)}else{d.removeChild(b)}return e})(this));

I really do appreciate your efforts to help me solve this problem... Thank you in advance

{module_captchav2} and HTML5 code validation

forums_noreply@adobe.com — Fri, 26 Oct 2012 23:31:54 GMT

I'm using {module_captchaV2} on a newsletter sign-up on an HTML5 page.

When I run it through W3 validator (http://validator.w3.org ) it shows 3 errors relating to the CAPTCHA part of my form.

Line 1694, Column 115: & did not start a character reference. (& probably should have been escaped as &.) …hx?ID=f0447d28bc1243edb63fdab03984ffb1&Color=DimGray&ForeColor=White&Width=160…
✉
Line 1694, Column 129: & did not start a character reference. (& probably should have been escaped as &.) …bc1243edb63fdab03984ffb1&Color=DimGray&ForeColor=White&Width=160" alt="Captcha…
✉
Line 1694, Column 145: & did not start a character reference. (& probably should have been escaped as &.) …03984ffb1&Color=DimGray&ForeColor=White&Width=160" alt="Captcha Image" /></div>

The quick fix is replace the &'s with & but this is code I can't seem to find to amend. I assume this is 'server-side'?

Is there another way around this?

Regards

Mike

using JS to open code in a div tag instead of new window

forums_noreply@adobe.com — Fri, 01 Jun 2012 03:41:57 GMT

I posted this originally here http://forums.adobe.com/message/4450227#4450227 and was directed to this forum. I believe it is a simple solution but I don't have the code skills to write by scratch. I just normall hack through things but I can't find an example of what I am looking for.

Original question

I created a database for store locations. I was able to display the list of stores. Here though I don't want the list to show the number in front of it... I still need to find the CSS to edit my results for this one. However, more importantly, I don't want to open my results in a new window, I want to be able to target a DIV tag instead.

This is the code that is created to display the list of stores.

{module_webapps,5665,a,,,_blank,,50,,1}

Currently it opens a blank window. I'd like to target a div tag on the right of the list area where the store info can appear.

Perhaps the gurus at adobe can upgrade this feature? Target DIVs instead of new or blank windows, or using frames. Below is the screen of the links created from the DB.

Below is the blank window that it opens.

Would like to make it open in a div to the right of the list. Not sure how to change to core code that was created to make that change.

Mario responded with

1. mario_gudelj,

Adobe Employee

May 30, 2012 5:08 AM in reply to QreusJorj

Report

Hi QreusJorj,

The way I'd do that is to use {tag_name_value} to obtain the the path to the detail view and then use jQuery's .load() to pull in the detail view of the web app and render it in the targeted div. See http://api.jquery.com/load/

I guess it'd look like this in the list view:

$('#result').load('{tag_name_value');

where "result" is the ID of the div you want to display the detail view in.

Cheers,

Mario

He continued to suggest trying this area or find somebody that can implement. Looking to resolve this as it is holding up the launch of the new site.