Here's my url http://bloomh.com/
If you look down in the "testimonial" section you'll see a bunch of weird characters being displayed. Strange thing is that it seems to "grow" over time and the code is inside my html. Obviously I did not add this to my original html.
How and why is this happening. Very strange. Any help and direction would be greatly appreciated.
Ok here's the html and php. The weird characters are inside the html however I did not add that at all. Also another small caveat is I used the frontend creator Webflow.com and then exported the html and transferred over to my hosting. Webflow is pretty legit and I've already spoken with them and they've assured me that their code is clean. Once again this happened after I published the page and used the php form a couple of times then those weird characters started to "grow" over time.
HTML
<!DOCTYPE html>
<!-- This site was created in Webflow. http://www.webflow.com-->
<!-- Last Published: Tue Aug 19 2014 18:12:20 GMT+0000 (UTC) -->
<html data-wf-site="5359ea800548c9ed4700023a" data-wf-page="53dbf829e673629c186afc3f">
<head>
<meta charset="utf-8">
<title>Bloomh</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="Webflow">
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/webflow.css">
<link rel="stylesheet" type="text/css" href="css/bloomhmvp.webflow.css">
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
<script>
WebFont.load({
google: {
families: ["Carme:regular","Roboto Slab:300,regular,700","Nixie One:regular","Pontano Sans:regular","Quicksand:300,regular,700","Muli:300,300italic,regular,italic","Raleway:300,regular,500,600,700,800,900","Arimo:regular,italic,700,700italic","Oxygen:300,regular,700","Cabin:regular,italic,500,500italic,600,600italic,700,700italic","Roboto:300,300italic,regular,italic,500,500italic,700,700italic,900,900italic"]
}
});
</script>
<script type="text/javascript" src="js/modernizr.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="images/fontawesome-webfont.svg">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<body>
<div class="w-nav navbar vl" data-collapse="medium" data-animation="default" data-duration="400">
<div class="w-clearfix navbar-section">
<div class="logo-container vl">
<a class="w-nav-brand logo vl" href="#"></a><a class="brand vl" href="#">Bloomh</a>
</div>
</div>
</div>
<div class="hero-background home2 vl">
<div class="w-container hero-container">
<div class="coming-soon">COMING SOON!</div>
<div class="centering-container _95">
<h1 class="hero-tagline home2 vendor-landing vl">Brides set the price<br>Vendors come to them</h1>
</div>
<div class="centering-container _85 tablet">
<h2 class="secondary-tagline home2 vendor-landing vl">A new way to hire photographers & videographers</h2>
</div>
<div class="vendor-question-box">
<div class="w-row">
<div class="w-col w-col-4">
<div class="w-form">
<form id="wf-form-vl2-signup" action="php/vl2_submit.php" method="post" name="wf-form-vl2-signup" data-name="vl2 signup" data-redirect="http://www.bloomh.com">
<div class="centering-container">
<input class="w-input post-page-input-fields input-fields vendor-landing vl" id="vl2-email" type="email" placeholder="Valid Email" name="vl2_email" data-name="vl2 email" required="required">
<input class="w-input post-page-input-fields input-fields vendor-landing vl" id="vl2-address" type="text" placeholder="Website address?" name="vl2_address" data-name="vl2 address" required="required">
<input class="w-button button join-button vendor-join vl" type="submit" value="Vendor Join!" data-wait="Joining..." wait="Joining...">
</div>
</form>
<div class="w-form-done">
<p>Thank you! Your submission has been received!</p>
</div>
<div class="w-form-fail">
<p>Oops! Something went wrong while submitting the form :(</p>
</div>
</div>
</div>
<div class="w-col w-col-8">
<div class="centering-container _85 vl">
<div class="vendor-question vl">Are you a Photographer or Videographer?</div>
<div class="w-hidden-main w-hidden-medium w-hidden-small how-to-wrap vl">
<div class="centering-container vendor-sale mobile">
<div class="vendor-sale-text vl">Sign Up</div>
</div>
<div class="centering-container">
<div class="fa fa-chevron-down vendor-welcome vl"></div>
</div>
<div class="centering-container mobile">
<div class="vendor-sale-text vl get-clients">Get clients via email</div>
</div>
<div class="centering-container">
<div class="fa fa-chevron-down mobile"></div>
</div>
<div class="centering-container mobile">
<div class="vendor-sale-text vl">Free and Easy!</div>
</div>
</div>
<div class="w-hidden-tiny vendor-question-subtext phone">
<div class="vendor-how-to vendor-landing vl">Sign Up</div>
<div class="fa fa-chevron-right vendor-landing vl"></div>
<div class="vendor-how-to vendor-landing vl">Get clients in your inbox</div>
<div class="fa fa-chevron-right vendor-landing vl"></div>
<div class="vendor-how-to vendor-landing vl">Free and Easy!</div>
</div>
<div class="more-categories vendor-landing vl">Birthdays / Portraits / Parties / Bat Mitzvahs / Engagements</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="vl-testimonials">
<div class="centering-container vl testimonials">
<div class="testimonial vl">Testimonials</div>
<div class="testimonial-text vl">“I use Bloomh to get most of my new wedding clients. It plays a big part in growing my business.â€ÂÂÂÂÂÂ</div>
<div class="testimonial-user main vl">- Lance Capshaw, Huntington Beach CA
<br>(Vendor)</div>
<div class="testimonial-text vl">“I can't believe this service is free! I use it to get my wedding clients. They just come into my inbox!â€ÂÂÂÂÂÂ</div>
<div class="testimonial-user main vl">- Trish Carpenter, Hermosa Beach, CA
<br>(Vendor)</div>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/webflow.js"></script>
<!--[if lte IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif]-->
</body>
</html>
**** PHP ****
<?php
$email = htmlspecialchars($_POST['vl2_email']);
$website_address = htmlspecialchars($_POST['vl2_address']);
mail("bpark#bloomh.com", "New Vendor vl2", "From: $email", "Website Address: $website_address");
header("Location:../vl2-confirm.html");
?>
1) Search the whole code with the class name "testimonial-text" and see the code, try to replace the content after typing from notepad.
2) add a <p>Your content content</p> for your paragraphs.
3) you can paste the server side code for us.
4) You need to tell to MySQL that the connection must be made in UTF-8.
Related
I am currently having two main currencies for my business. The product page is actually built using HTML. I have 4 products in a page and I want to display two prices for each product, like if someone selects USD, cost in USD will be displayed and if someone selects EUR then it'll show the price accordingly, without reloading the page. I also want the order link to be changed upon selecting the currency.
Please I don't want to convert the currency. I just want to store two different price values for each product and display it accordingly when user changes the currency.
It's NOT any CMS based or eCommerce website, just few HTML pages. I think it's it can be done using JS but I am not a programmer :/
Would anyone please tell me how to do it? I need a very simple program but I have no idea where to start.
Here's product pricing section HTML source code-
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Website Hosting | Host Hub</title>
<!--Favicon-->
<link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.png"/>
<!--Libraries-->
<link rel="stylesheet" type="text/css" href="assets/libraries/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/libraries/font-awesome/css/all.min.css">
<link rel="stylesheet" type="text/css" href="assets/libraries/animate/animate.min.css">
<!--Google Fonts-->
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Overlock:400,400italic,700,700italic,900,900italic">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Signika:300,400,600,700">
<!--Styles-->
<link rel="stylesheet" type="text/css" href="assets/css/style.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/mobile.min.css">
<!--Custom CSS-->
<link rel="stylesheet" type="text/css" href="assets/css/custom.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!--Begin Header-->
<div class="topbar">
<div class="container">
<div class="row">
<!--Begin Social Icons-->
<div class="col-xl-4 col-lg-4 col-md-3 col-sm-3 col-12 social">
<div class="link"><i class="fab fa-facebook"></i></div>
<div class="link"><i class="fab fa-twitter-square"></i></div>
<div class="link"><i class="fab fa-youtube-square"></i></div>
<div class="link"><i class="fab fa-skype"></i></div>
</div>
<!--End Social Icons-->
<!--Begin Client Links-->
<div class="col-xl-8 col-lg-8 col-md-9 col-sm-9 col-12 text-right client">
<div class="link xshide"><i class="fas fa-coins"></i>$ USD</div>
<div class="link xshide"><i class="fas fa-globe"></i>Language</div>
<div class="link"><i class="fas fa-lock"></i>Customers</div>
<div class="link"><i class="fas fa-life-ring"></i>Support</div>
<div class="link"><i class="fas fa-shopping-cart"></i><span class="desktop">View Cart</span> (0)</div>
</div>
<!--End Client Links-->
</div>
</div>
</div>
<!--End Header-->
<!--Begin Web Hosting-->
<div class="webhosting">
<div class="container">
<div class="row">
<!--Begin Plan Box-->
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 wow zoomInDown">
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">Micro Hub</h3>
</div>
<div class="panel-body">
<div class="the-price">
<h1> $2<span class="subscript">.99</span></h1>
<small>Per Month</small> </div>
<table class="table">
<tr>
<td>1 GB Storage</td>
</tr>
<tr>
<td>10 GB Bandwidth</td>
</tr>
<tr>
<td>Unlimited Email</td>
</tr>
<tr>
<td>Unlimited Databases</td>
</tr>
<tr>
<td>Unlimited FTP Accounts</td>
</tr>
<tr>
<td><img alt="" src="assets/img/hosting/website-hosting/cpanel.png" srcset="assets/img-retina/hosting/website-hosting/cpanel#2x.png 2x" class="img-fluid" /></td>
</tr>
</table>
</div>
<a href="#">
<div class="panel-footer">Order Today</div>
</a> </div>
</div>
<!--End Plan Box-->
<!--Begin Plan Box-->
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 wow zoomInDown" data-wow-delay="0.2s">
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">Small Hub</h3>
</div>
<div class="panel-body">
<div class="the-price">
<h1> $7<span class="subscript">.99</span></h1>
<small>Per Month</small> </div>
<table class="table">
<tr>
<td>10 GB Storage</td>
</tr>
<tr>
<td>100 GB Bandwidth</td>
</tr>
<tr>
<td>Unlimited Email</td>
</tr>
<tr>
<td>Unlimited Databases</td>
</tr>
<tr>
<td>Unlimited FTP Accounts</td>
</tr>
<tr>
<td><img alt="" src="assets/img/hosting/website-hosting/cpanel.png" srcset="assets/img-retina/hosting/website-hosting/cpanel#2x.png 2x" class="img-fluid" /></td>
</tr>
</table>
</div>
<a href="#">
<div class="panel-footer">Order Today</div>
</a> </div>
</div>
<!--End Plan Box-->
<!--Begin Plan Box-->
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 wow zoomInDown" data-wow-delay="0.4s">
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">Big Hub</h3>
</div>
<div class="panel-body">
<div class="the-price">
<h1> $9<span class="subscript">.99</span></h1>
<small>Per Month</small> </div>
<table class="table">
<tr>
<td>20 GB Storage</td>
</tr>
<tr>
<td>200 GB Bandwidth</td>
</tr>
<tr>
<td>Unlimited Email</td>
</tr>
<tr>
<td>Unlimited Databases</td>
</tr>
<tr>
<td>Unlimited FTP Accounts</td>
</tr>
<tr>
<td><img alt="" src="assets/img/hosting/website-hosting/cpanel.png" srcset="assets/img-retina/hosting/website-hosting/cpanel#2x.png 2x" class="img-fluid" /></td>
</tr>
</table>
</div>
<a href="#">
<div class="panel-footer">Order Today</div>
</a> </div>
</div>
<!--End Plan Box-->
</div></div></div>
<!--Libraries-->
<script src="assets/libraries/jquery/jquery.min.js"></script>
<script src="assets/libraries/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/libraries/jquery-ui/jquery-ui.min.js"></script>
<script src="assets/libraries/wow/wow.min.js"></script>
<script src="assets/libraries/zumada/sticky-header.min.js"></script>
<script src="assets/libraries/zumada/dropdown-menu.min.js"></script>
<script src="assets/libraries/zumada/price-slider-6-plans.min.js"></script>
<script src="assets/libraries/zumada/scroll-to-top.min.js"></script>
<script src="assets/libraries/zumada/countdown.min.js"></script>
<!--Custom Scripts-->
<script src="assets/js/scripts.js"></script>
</body>
</html>
I was not patient enough to wait for your HTML and simply built this "mvce" (minimum viable and complete example).
There are many ways of providing the two prices. I chose the way via the data attribute in the price <td>s.
const tbl=document.querySelector("table");
let cur=0; // possible values: 0 and 1
const change=()=>{
tbl.querySelectorAll(".price").forEach(td=>td.textContent=td.dataset.pr.split(" ")[cur]);
cur=1-cur;
}
document.querySelector("button").onclick=change;
change()
.price {text-align:right}
<table>
<tr><th>nr</th><th>Fruit</th><th>Price</th></tr>
<tr><td>1</td><td>Apple</td><td class="price" data-pr="1€ 1.2$"></td></tr>
<tr><td>2</td><td>Orange</td><td class="price" data-pr="10€ 12$"></td></tr>
<tr><td>3</td><td>Banana</td><td class="price" data-pr="2€ 2.4$"></td></tr>
<tr><td>4</td><td>Pineapple</td><td class="price" data-pr="5€ 6$"></td></tr>
<tr><td>5</td><td>Apricot</td><td class="price" data-pr="7€ 8.3$"></td></tr>
<tr><td>6</td><td>Pear</td><td class="price" data-pr="3€ 3.6$"></td></tr>
</table>
<button>change currency</button>
And here is another sample, based on your HTML (I added the `data-pr="24.95 20.80" attributes):
let cur=1;
document.querySelector("button").onclick=()=>{
document.querySelectorAll(".the-price h1").forEach(h=>{
let p=h.dataset.pr.split(" ")[cur].split(".");
h.innerHTML=['$','€'][cur]+p[0]+'<span class="subscript">.'+p[1]+'/m</span>';
});
cur=1-cur;
}
.subscript {font-size:1ex}
<div class="webhosting">
<div class="container">
<div class="row">
<!--Begin Plan Box-->
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 wowzoomInDown">
<div class="panel">
<div class="panel-heading" style="background: #03989e">
<a name="pricing"></a>
<h3 class="panel-title">NVMe-1</h3>
</div>
<div class="panel-body">
<div class="the-price">
<h1 data-pr="11.95 9.50"> $11<span class="subscript">.95/m</span></h1>
<small>Per Monthly</small> </div>
<table class="table">
<tr>
<td>Product Description 1</td>
</tr>
<tr>
<td>Product Description 2</td>
</tr>
</table>
</div>
<a href="{$WEB_ROOT}/cart.php?a=add&pid=77">
<div class="panel-footer">GET STARTED TODAY</div>
</a> </div>
</div>
<!--End Plan Box-->
<!--Begin Plan Box-->
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 wowzoomInDown" data-wow-delay="0.2s">
<div class="panel">
<div class="panel-heading" style="background: #38b6ff ">
<h3 class="panel-title">NVMe-2</h3>
</div>
<div class="panel-body">
<div class="the-price">
<h1 data-pr="24.95 20.80"> $24<span class="subscript">.95/m</span></h1>
<small>Per Monthly</small> </div>
<table class="table">
<tr>
<td>Product Description 1</td>
</tr>
<tr>
<td>Product Description 2</td>
</tr>
</table>
</div>
<a href="{$WEB_ROOT}/cart.php?a=add&pid=78">
<div class="panel-footer">GET STARTED TODAY</div>
</a> </div>
</div>
<!--End Plan Box-->
</div>
</div>
</div>
<button>change currency</button>
You can do this easily by using Javascript. You can store the pricing in a JS function and return the actual amount stored when currency is changed without reloading the page.
If I could see your page source code, I would be able to help you resolve this better.
HTML/CSS Solution
No JavaScript Needed
Points to Consider Before Saying, "It Doesn't Work"
The OP (Original Post) had too much HTML to be considered very useful. A typical Bootstrap layout consists of <div>s heavily burdened by BS (Bootstrap) classes wrapped around more of the same.
The majority of the HTML is removed and only what is needed has been replaced by more semantic elements. Most importantly, the interactive element <a> was replaced by a <input type='checkbox' hidden> and a <label>. There are a few good reasons for this particular change:
Checkboxes are in one of two states checked = true or checked = false. The CSS pseudo-class :checked will change the style of the <label>, and all of the <figure> following it as well as the <sup> nested within each <figure>. When in default, (checked = false) everything is USD and when checked is changed to EUR.
Ascetically, the <label> can be styled to look like a <button>, <a>, etc. and the checkbox is actually has the hidden attribute. Since the checkbox has id='currency' and the <label> has for='currency' any click to the <label> is a click to the checkbox as well (and vise versa although it doesn't matter in this case since the checkbox is hidden).
Important: The HTML layout should not be altered in a way wherein one or more elements are placed between checkbox and <label> or inserted into any <figure>. There shouldn't be a problem about adding anything around, ahead, or behind them.
All <link> (except the Google Fonts) pointed to relative paths (ex. href='/path/to/style.css') making them useless. I added the BS classes have styles that have a high specificity that can't be overridden easily. I added the BS CSS and then doubled up the classes of the custom CSS to increase their specificity in order to override BS CSS.
Important: The only thing that can be changed are the name of the classes and any CSS property/value with one exception which is content:. If the CSS is placed in a file (ex. style.css), make sure the CSS rule sets are the last ones. If placed in a <style>, make sure the CSS rule sets are the last ones.
The dynamically changing text relies on the following:
:checked + label::before changes {content: '💲USD';... to '\a0€ EUR'
:checked ~ figure::before changes {content: '💲'attr(data-usd)... to €attr(data-eur) for all <figure>s that follow the checkbox.
:checked ~ figure > sup::before changes {content: '.'attr(data-usd)... to '.'attr(data-eur) for all <sup>
Since there's no JavaScript involved, the values are stored on each <figure> and <sup> data-usd and data-eur attributes and must be manually edited (which is what OP requested if I recall)
:checked ~ figure::before {content: '€\a0'attr(data-eur);...}
<input type='checkbox' checked hidden>
<label>€ EUR</label>
...
<figure data-usd='9' data-eur='12'>
€ 12<sup data-usd='99' data-eur='33'>.33</sup>
</figure>
label.money.money {
font-size: 2.5ch;
font-weight: 700;
line-height: 1;
cursor: pointer;
}
label.money.money::before {
content: '💲USD';
}
#currency:checked+label.money.money::before {
content: '\a0€ EUR';
}
figure.price.price {
width: max-content;
font-size: 4.75ch;
font-weight: 500;
line-height: 1.33;
}
figcaption.caption.caption {
width: 100%;
font-size: 0.3em;
padding: 0 0 0 1.5em;
}
sup.cents.cents {
vertical-align: middle;
font-size: 0.6em;
line-height: 0.7;
margin-left: -.75ch;
}
figure.price.price::before {
content: '💲'attr(data-usd);
}
sup.cents.cents::before {
content: '.'attr(data-usd);
}
#currency:checked~figure.price.price::before {
content: '€\a0'attr(data-eur);
padding-left: 0.3em;
}
#currency:checked~.price>sup.cents.cents::before {
content: '.'attr(data-eur);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<input id='currency' class='btn-click' type='checkbox' hidden>
<label class='money btn btn-link btn-lg' for='currency'></label>
<figure class='price' data-usd='2' data-eur='4'>
<sup class='cents' data-usd='99' data-eur='33'></sup>
<figcaption class='caption'>Per Month</figcaption>
</figure>
<figure class='price' data-usd='7' data-eur='13'>
<sup class='cents' data-usd='99' data-eur='33'></sup>
<figcaption class='caption'>Per Month</figcaption>
</figure>
<figure class='price' data-usd='9' data-eur='16'>
<sup class='cents' data-usd='99' data-eur='33'></sup>
<figcaption class='caption'>Per Month</figcaption>
</figure>
</body>
</html>
This question already has answers here:
What is XHTML role attribute? What do you use it for?
(3 answers)
Closed 8 years ago.
I have created a web page using html5.
I used source code from bootstrap.
For example: role="main", role ="navigation", role = "document" etc.
If I remove these attribute from my code, page didn't any change.
So I want to know: what is the purpose of "role" attribute?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Raleway:900,500,600,200,400,700' rel='stylesheet' type='text/css'>
<title>Layout</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body role="document">
<!-- Fixed navbar -->
<div class="navbar" role="navigation">
<div class="container">
<div class="navbar-header">
<h1><img src="img/logo.png" /></h1>
</div>
</div>
</div>
<div class="container theme-showcase" role="main">
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="container">
<div class="banner-div">
<img src="img/banner.png" class="banner"/>
<img src="img/issue-no-img.png" class="issue-badge"/>
<span class="issue">Issue No.<br /><b>376</b></span>
</div>
<div class="row">
<div class="col-md-4">
<img src="img/left-note-img.png"/>
</div>
<div class="col-md-4 align-center">
<p><span class="new-radius"> NEW! </span> <span class="new">JUN 07, 2003</span></p>
<p><i>Get your breaks points on.</i></p>
<span>
<h1>DOT NET ARTICLES</h1>
</span>
<span class="comments"><i>by</i> <a>JOHN WOO</a> <i> - 10 Commments</i></span><br/>
</div>
<div class="col-md-4 pull-right">
<div class="input-group">
<input type="text" class="form-control search-input-box" placeholder="Search..." />
<span class="input-group-addon glyphicon glyphicon-search"></span>
</div>
</div>
</div>
<hr class="hr-style"/>
<p class = "header-pgf">
Text, navigation, and tables, oh, my! What's a responsive web designer to do? How can you confine your design to as few major breakpoints as possible? Where and when will you sketching? Is it possible to sketch on actual devices, and what are the accessibility implications of doing so? The answers to these and other profound questions will be found in this exclusive excerpt from Chapter 7 of Responsive Design Workflow, Stephen Hay's new book, available now from New Riders.
</p>
<hr class="hr-style">
<h1 class="more-apart">More from A List Apart</h1>
<hr class="hr-style">
<div class="row">
<div class="col-md-3">
<h2>Columnists</h2>
<p>JACK MCGRANE <i>on</i> CONTENT</p>
<p class="pgf-header">The Alternative is Nothing</p>
<img src="img/thumb1.jpg" class="float-left" />
<p>We're witnessing one of thr latest waves of technological disruption, as mobile devices put access to the internet in the hands of people who previously never had that power.</p>
</div>
<div class="col-md-3">
<h2>From the Blog</h2>
<p class="pgf-header">Maps Should Be Crafted.Not "Plugged In"></p>
<p>Web designers: erase the line between "the map" and "the content" by harnessing the power of open-source Leafler and your own fresh creative thinking. In the tradition of ALA's recent "Hack Your Maps." Happy Cog's Brandon Rosage shares how to make location a central aspect of the content experience-not just a visual aid.</p>
</div>
<div class="col-md-3">
<p class="md-3">Amazon Web Services Introduces a New API</p>
<p>Amazon Web Services Identity and Access Management(IAM) is expanding to support web identity federation. Developers can integrate Amazon.com, Facebook, or Google odentity into their app by using the new AWS Security Token Services(STS) API, AssumeRoleWithWebIdentity. to request temporary security credentials.</p>
</div>
<div class="col-md-3">
<h5>Gratitude</h5>
<p>Thanks to our RSS sponser Typekit-offering desktop and web fonts in a single subscription starting June 17</p>
<div class="well align-center">
<img src="img/mothers-day.jpg" /> <br/>
<p class="font-10">Two special Mothers' Say Kits are available from Field Notes Brand. Ad via The Deck </p>
</div>
<div class="job-board">
<h5>Job Board</h5>
<a href="#" >New York Times is looking for a <br />Ruby on Rails Web Developer.</a>
More on the Job Board >
</div>
</div>
</div>
<br />
</div>
</div>
<!-- /container -->
<div class="footer" style="">
<div class="container">
<div class="list-footer" style="font-size:13px;">
<span class="padding-10"><img src="img/article-logo.png" /></span>
<span class="padding-10">ARTICLES</span>
<span class="padding-10">COLUMNS</span>
<span class="padding-10">BLOG</span>
<span class="padding-10">TOPICS</span>
</div>
<div class = "list-footer" style="font-size:12px;">
<span class="padding-10">ABOUT</span>
<span class="padding-10">AUTHORS</span>
<span class="padding-10">MASTHEAD</span>
<span class="padding-10">CONTRIBUTE</span>
<span class="padding-10">STYLE GUIDE</span>
<span class="padding-10">CONTACT</span>
<span class="padding-10">SPONSORSHIPS</span>
</div>
<hr class="hr-style"/>
<div class="row">
<div class="col-md-6">
<img src="img/dot-net-ad.jpg" class="footer-image"/>
<h3>.NET Training</h3>
<p class="footer-pgf">If you have a .NET question on a topic that 's not covered by other more specific forums.</p>
<a class="footer-link" href="#">ask here. ></a>
</div>
<div class="col-md-6">
<img src="img/shopify-expert-ad.jpg" class="footer-image"/>
<h3>Shopify Expert</h3>
<p class="footer-pgf">Unique custom made Shopify theme and tweaks.</p>
<a class="footer-link" href="#">click to view</a>
</div>
</div>
<hr class="hr-style" />
<div style="text-align:center">
<p class="copyright">Copyright © 2013 Dot Net How</p>
</div>
</div>
</div>
</body>
</html>
It provides support for ARIA (Accessible Rich Internet Applications) which allows to specify even more semantic richness in documents.
You can add role="search" to your search form, role="banner" to your
masthead, and role="contentinfo" to your page footer. There’s a full
list of values in the ARIA specification at
http://www.w3.org/TR/wai-aria/roles#role_definitions.
Basically you don't have to add them, but its better if you do as it provides more context for your page. More discussed at A List Apart.
The new structural elements in HTML5 will be very useful to assistive technology. Instead of creating “skip navigation” links, all we need to do is use the nav element correctly. This will allow screen reader users to skip past navigation without us having to provide an explicit link.
Twitter Bootstrap uses like <nav role="navigation">. So Bootstrap take consider not only normal browser but also take care of screen reader browsers.
Note: By including Role attribute you are making your website more accessible and its good practice to use this Role attribute.
I'm having a very strange problem with IE8 where the paragraph text is cropping up strange angular symbols seemingly at random. Here is a sample of the source code:
<!DOCTYPE html>
<html class="html">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8"/>
<meta name="generator" content="7.1.329.244"/>
<title>Friends of Hartpury School Promises Auction 2014</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/site_global.css?4151054444"/>
<link rel="stylesheet" type="text/css" href="css/master_a-master.css?428943956"/>
<link rel="stylesheet" type="text/css" href="css/index.css?308194328" id="pagesheet"/>
<!-- Other scripts -->
<script type="text/javascript">
document.documentElement.className += ' js';
</script>
</head>
<body>
<div class="clearfix" id="page"><!-- column -->
<div class="position_content" id="page_position_content">
<div class="clearfix colelem" id="pu196"><!-- group -->
<div class="browser_width grpelem" id="u196"><!-- group -->
<div class="clearfix" id="u196_align_to_page">
<div class="clip_frame grpelem" id="u203"><!-- image -->
<img class="block" id="u203_img" src="images/friends-of.png" alt="" width="126" height="122"/>
</div>
</div>
</div>
<div class="clip_frame grpelem" id="u197"><!-- image -->
<img class="block" id="u197_img" src="images/banners.png" alt="" width="214" height="64"/>
</div>
<div class="clip_frame grpelem" id="u199"><!-- image -->
<img class="block" id="u199_img" src="images/banners.png" alt="" width="214" height="64"/>
</div>
<div class="clip_frame grpelem" id="u277"><!-- image -->
<img class="block" id="u277_img" src="images/header.png" alt="" width="604" height="248"/>
</div>
</div>
<div class="clearfix colelem" id="u276-11"><!-- content -->
<p><a class="nonblock" href="index.html">THE AUCTION</a> | <a class="nonblock" href="tickets.html">TICKETS</a> | <a class="nonblock" href="rules---submit-bid.html">RULES & SUBMIT BID</a></p>
</div>
<div class="rounded-corners clearfix colelem" id="u375"><!-- group -->
<div class="clearfix grpelem" id="u376-8"><!-- content -->
<p id="u376-2">Welcome to our Promises Auction website where you can see the fabulous promises that have been donated by friends, family, local and national businesses to support our school.</p>
<p id="u376-4">A huge thank you to all our sponsors!</p>
<p id="u376-6">All funds raised will go towards our Hartpury IT 21st Century appeal. In this age of technology our server is creaking, our few laptops are old and slow and all four classes in school have access to just one central printer. We need to raise £10,000 over the school year to help purchase a new server, new laptops, upgraded interactive whiteboards and printers for each classroom. If possible we would also like to provide e-readers too.</p>
</div>
</div>
<div class="clearfix colelem" id="u526"><!-- group -->
<div class="pointer_cursor rounded-corners clearfix grpelem" id="u517"><!-- group -->
<a class="block" href="http://#"></a>
<a class="nonblock nontext clearfix grpelem" id="u520-4" href="http://#"><!-- content --><p>PROMISES SO FAR</p></a>
<a class="nonblock nontext clip_frame grpelem" id="u521" href="http://#"><!-- image --><img class="block" id="u521_img" src="images/forward.png" alt="" width="38" height="38"/></a>
</div>
</div>
<div class="clearfix colelem" id="pu527"><!-- group -->
<div class="rounded-corners clearfix grpelem" id="u527"><!-- group -->
<div class="clearfix grpelem" id="u533-11"><!-- content -->
<p id="u533-2">How to donate</p>
<p class="ts-Default-Link-Style--copy" id="u533-7">If our catalogue inspires you to donate a promise, please use this <a class="nonblock" href="rules---submit-bid.html"><span id="u533-4">donor form</span></a> and someone from the auction team will contact you.</p>
<p id="u533-9">Thank you so much for your support.</p>
</div>
</div>
<div class="rounded-corners clearfix grpelem" id="u528"><!-- group -->
<div class="clearfix grpelem" id="u529-17"><!-- content -->
<p id="u529-2">What if I can’t make the Auction?</p>
<p id="u529-4">Hopefully the catalogue will tempt you to come along to the Auction on 29th can’t make it then advance bids can be submitted by:</p>
<p class="Paragraph-Style" id="u529-8">Submitting an <a class="nonblock" href="rules---submit-bid.html"><span id="u529-6">on-line bid</span></a></p>
<p class="Paragraph-Style" id="u529-13">Completing <a class="nonblock" href="http://www.hartpuryauction.co.uk/formdownload/PreAuctionBidForm.doc"><span id="u529-10">this pre-auction bid form</span></a> and placing it in a sealed envelope addressed to FOHS Promises Auction c/o the school office.</p>
<p id="u529-15">Please read our very simple rules before submitting your bid.</p>
</div>
</div>
<div class="rounded-corners grpelem" id="u872"><!-- simple frame --></div>
<div class="rounded-corners grpelem" id="u873"><!-- simple frame --></div>
</div>
<div class="verticalspacer"></div>
<div class="browser_width colelem" id="u356"><!-- column -->
<div class="clearfix" id="u356_align_to_page">
<div class="position_content" id="u356_position_content">
<div class="clip_frame colelem" id="u362"><!-- image -->
<img class="block" id="u362_img" src="images/footer-banner.png" alt="" width="604" height="125"/>
</div>
<div class="clearfix colelem" id="u368-4"><!-- content -->
<p>Suas appareat pro eu. Te sea liber senserit maluisset, diam moderatius ea quo. Qui at purto docendi placerat, pertinax efficiendi mea ei. Adhuc fugit eloquentiam ut usu.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- JS includes -->
<script type="text/javascript">
if (document.location.protocol != 'https:') document.write('\x3Cscript src="http://musecdn.businesscatalyst.com/scripts/4.0/jquery-1.8.3.min.js" type="text/javascript">\x3C/script>');
</script>
<script type="text/javascript">
window.jQuery || document.write('\x3Cscript src="scripts/jquery-1.8.3.min.js" type="text/javascript">\x3C/script>');
</script>
<script src="scripts/museutils.js?117816282" type="text/javascript"></script>
<script src="scripts/jquery.tobrowserwidth.js?152985095" type="text/javascript"></script>
<script src="scripts/jquery.watch.js?4199601726" type="text/javascript"></script>
<!-- Other scripts -->
<script type="text/javascript">
$(document).ready(function() { try {
Muse.Utils.transformMarkupToFixBrowserProblemsPreInit();/* body */
$('.browser_width').toBrowserWidth();/* browser width elements */
Muse.Utils.prepHyperlinks(true);/* body */
Muse.Utils.fullPage('#page');/* 100% height page */
Muse.Utils.showWidgetsWhenReady();/* body */
Muse.Utils.transformMarkupToFixBrowserProblems();/* body */
} catch(e) { Muse.Assert.fail('Error calling selector function:' + e); }});
</script>
</body>
</html>
If you copy your code and paste it into another editor (I'm using Notepad++), you will see the weird symbols in your text.
You will need to go back and erase these characters and paste it back into your website. And then when inserting new content into your site, you need to make sure the text is written in/or saved as charset=UTF-8, which is what your site specifies.
I was able to find a similar report in an Adobe post.
http://forums.adobe.com/thread/1073776
It wasn't really 'solved' but you may try deleting characters that seem like spaces and putting them back in. There could be characters that appear to be spaces to your editor (and other browsers) that are actually a different char.
i am using this code for playing music for my website way2enjoy.com .it playes all songs nicely whose source is in english language but when the source file is in other language say for example arabic it wont play. i have checked the source code using firebug it was 100% corrrect for one flash player and in other flash player it was showing arabic character as ??????????
here is my existing source code .you can see the third div which is arabic. first two will play nicely in the below link but third will not play however everything is just right.
live example http://way2enjoy.com/try/musictest/drplayer/index.html
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="Stylesheet" href="drplayer.css" type="text/css" />
<script src="jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="drplayer.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#playlist").playlist(
{
playerurl: "swf/drplayer.swf"
}
);
});
</script>
</head>
<body>
<div id="playlist">
<div href="29.mp3" style="width: 400px;" class="item">
<div>
<div class="fr duration"></div>
<div class="btn play"></div>
<div class="title"><b></b> - Shut up and let me </div>
</div>
<div class="player inactive"></div>
</div>
<div class="clear"></div>
<div href="30.mp3" style="width: 400px;" class="item">
<div>
<div class="fr duration"></div>
<div class="btn play"></div>
<div class="title"><b>Metallica</b> - Nothing else matters</div>
</div>
<div class="player inactive"></div>
</div>
<div class="clear"></div>
<div href="ارجعلي.mp3" style="width: 400px;" class="item">
<div>
<div class="fr duration"></div>
<div class="btn play"></div>
<div class="title"><b>Arabic song</b> - Arabic song</div>
</div>
<div class="player inactive"></div>
</div>
</div>
Prev
Next
Pause
Play
here is link for other player i tried
http://way2enjoy.com/music/viewstory/3406
ارجعلي.mp3 is not a valid URL, that may well be your problem. If that is true, you will have to URL encode it or use a latin-only URL.
Here is an on-line URL encoder:
http://meyerweb.com/eric/tools/dencoder/
it turns the file name into
%D8%A7%D8%B1%D8%AC%D8%B9%D9%84%D9%8A.mp3
which should be displayed okay in most browsers (ie. as ارجعلي.mp3), and always work.
I have called 2nd page <div id=child> on button click of 1st page <div id = home> and used jquery theme in both pages but the problem is in 2nd page there is no theme effect as in 1st page. I have put the css file in same folder and it is giving effect in 1st page and not in 2nd ?
Can any one solve the problem, so that the theme have effect in 2nd page also? Below is my code
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>
</title>
<link rel="stylesheet" href="jquerybasic/jquerymobilecss.css" />
<style>
/* App custom styles */
</style>
<script src="jquerybasic/jquery.min.js" type="text/javascript">
</script>
<script src="jquerybasic/jquery.mobile-1.1.0.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#buttonid').click(function() {
$('#child').toggle();
$('#home').toggle();
});
$('#buttonchild').click(function() {
$('#child').toggle();
$('#home').toggle();
});
$('#next').click(function() {
$('#home').show();
$('#child').hide();
});
$('#prev').click(function() {
$('#home').hide();
$('#child').show();
});
$('#nextchild').click(function() {
$('#home').show();
$('#child').hide();
});
$('#prevchild').click(function() {
$('#home').hide();
$('#child').show();
});
});
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-theme="d" data-role="header">
<h3>
The Grand Bhagavati
</h3>
<a data-role="button" id="next" data-inline="true" data-transition="slide" >
<<
</a>
<a data-role="button" id="prev" data-inline="true" data-transition="fade" >
>>
</a>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-mini="true">
<label for="textinput1">
User:
</label>
<input id="textinput1" type="text" />
</fieldset>
</div>
<input id="buttonid" data-theme="d" value="Login" type="button" />
</div>
<div data-theme="d" data-role="footer" data-position="fixed" >
<h3>
Page 1
</h3>
</div>
</div>
<div data-role="page" id="child">
<div data-theme="d" data-role="header">
<h3>
The Grand Bhagavati
</h3>
<a data-role="button" id="nextchild" data-inline="true" data-direction="reverse" data-transition="slide" >
<<
</a>
<a data-role="button" id="prevchild" data-inline="true" data-direction="reverse" data-transition="fade" >
>>
</a>
</div>
<div data-role="content">
<label>
hi khushbu. welcome...!
</label>
<input id="buttonchild" data-theme="d" value="Login" type="button" class="ui-btn-hidden" aria-disabled="false" />
</div>
<div data-theme="d" data-role="footer" data-position="fixed" >
<h3>
Page 2
</h3>
</div>
</div>
<script>
//App custom javascript
</script>
</body>
Ok boy :)
It seems you've skipped a rather important part of using a new piece of software, reading the documentation.
To navigate between pages you would just place this in the href attribute for the link:
<a data-role="button" href="#child">...</a>
And jQuery Mobile will handle the transition to the next pseudo-page. Here is the documentation for Linking Pages: http://jquerymobile.com/demos/1.1.0/docs/pages/page-links.html
If you want to do this programatically then you can use $.mobile.changePage() which is what gets used internally. The advantage to manually calling this function (say in a click event handler for a button) is that you can specify non-default options for the transition:
$('#next').on('click', function () {
$.mobile.changePage($('#child'), { transition : 'slide', reverse : true });
});
Here is the documentation for $.mobile.changePage(): http://jquerymobile.com/demos/1.1.0/docs/api/methods.html
If you wanted to roll your own transitions it's quite a bit more complex than showing one div and hiding another. You've got to setup some CSS classes that animate the transition using CSS3 (transform, transition, keyframes, etc.).
And finally, here is a demo of your code where I replaced the links in the header with a single link that works: http://jsfiddle.net/MmKK4/