In my web page i set the screen reader automatically read some content. When screen reader read last content(percentage) then after press down arrow key then focus on next element(footer) but screen reader move to first element(header).
I need to focus on next element instead of first element. For this I am using angular 11.
<app-header></app-header>
<div>
<span role="alert">
<span> Preparing environment...</span>
</span>
</div>
<div>
<span [attr.aria-label]="Your environment ready in {{minutes}} minutes {{second}} seconds">
<span aria-hidden="true">
<span>Your environment ready in </span>
<countdown *ngIf="!min" [config]="minutes" (event)="handleCountDown($event)"></countdown>
<span> {{ minutes }}</span>
</span>
</span>
<div class="progress" >
<div class="indeterminate"></div>
</div>
<div class="progress">
<div class="progress-bar">
{{ percentage }} %
</div>
</div>
</div>
<app-footer></app-footer>
header code
<div role="banner" class="navbar navbar-expand-lg py-0 headerBg" role="banner">
<img class="logo" aria-label="company logo" src="./logo.jpg" />
</div>
footer code
<footer id="footer" role="contentinfo" aria-label="footer" class="footerBottom">
<div class="row">
<p class="mb-0">
<span> footer...</span>
</p>
</div>
</footer>
Related
I am in a javascript beginner class and I am stuck with my homework. I went over it what feels like a million times but for some reason, I am missing something and I can't find it. Many thanks in advance!!! It is set up so that if the link has the data-reveal attribute and there is a modal element with the matching ID it will allow for that link to be clicked and the modal appears.
My HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, inital-scale=1.0, shrink-to-fit=no">
<meta name="description" content="description">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<title>London</title>
<link rel="stylesheet" type="text/css" href="styles/main.css">
<link rel="stylesheet" type="text/css" href="styles/london.css">
</head>
<!-- Head End -->
<body>
<header id="header" class="header">
<!-- Image Banner -->
<div id="logoWrapper" class="logoWrapper">
<img src="images/welcometoengland.png" class="logo" title="Welcome to England" alt="Welcome to England">
</div>
<section id="banner" class="banner">
<img src="images/banner/london_banner_1.png" class="banner__image" alt="banner">
</section>
<!-- Primary navigation -->
<nav id="nav" class="nav">
<ul class="nav__links nav__items">
<li class="nav__item">
Home
</li>
<li class="nav__item">
London
</li>
<li class="nav__item">
Daytrips
</li>
<li class="nav__item">
Cost
</li>
<li class="nav__item">
Stay
</li>
<li class="nav__item">
Travel
</li>
<li class="nav__item">
Shop
</li>
<li class="nav__item">
Contact Us
</li>
</ul>
</nav>
</header>
<!-- Header End -->
<main id="main" class="main">
<!--Left Content -->
<div id="main__content" class="main__content">
<div class="intro__wrapper">
<div class="intro__left">
<h4 id="attractionLinks__heading" class="attractionLinks__heading"></h4>
<ul id="attractionLinks__list" class="attractionLinks__list"></ul>
<p class="attractionLinks__instructions">If you have already visited some attractions or would like to add additional attractions, click the button below to update your preferences:</p>
<button id="attractionLinks__showForm" class="attractionLinks__showForm">Select Attractions</button>
</div>
<div class="intro__right">
<h3 class="intro__heading">Welcome to the Lodon Attractions page!</h3>
<p class="intro__text"> As a current memeber of the International Travel Club, you may select the attractions you would like to visit and we will keeo you updated with travel tips. When you click the London tab, you will only see links to attractions you would like to visit.</p>
<div class="form__inputWrapper">
<form class="form travelerForm" id="travelerForm" name="travelerForm">
<div class="form__inputWrapper">
<label for="fullName" class="form__label">Full Name:</label>
<input name="fullName" id="fullName" class="form__input" type="text" pattern="^[A-Za-z]+\s[A-Za-z]+$" placeholder="" required>
</div>
<div class="form__inputWrapper form__inputWrapper--checkboxes">
</div>
<!--Submit-->
<div class="form__inputWrapper form__inputWrapper--submit">
<input name="submitTraveler" id="submitTraveler" class="submit button" type="submit" value="Submit Form">
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Right Sidebar -->
<div id="main__sidebar" class="main__sidebar">
<!--London Clock-->
<div id="londonTime__wrapper" class="londonTime__wrapper">
<img class="londonTime__image" src="images/bigben.png" alt="Big Ben Clock">
<p id="londonTime" class="londonTime"></p>
</div>
<!--Attractions Select Wrapper-->
<div id="attractions" class="attractions">
<div class="attractions__instructionsWrapper">
<!--Attractions Instructions-->
<h2 class="attractions__heading">
Select an item from the list to display a picture and description of the attraction.
</h2>
</div>
<!--Attractions Select Wrapper-->
<div class="attractions__selectWrapper">
<select id="attractions__list" class="attractions__list">
</select>
</div>
<!--Attractions Display Wrapper-->
<div class="attractions__displayWrapper">
<div class="attractions__imageWrapper">
<img src="images/slideshow/placeholder.jpg" class="attractions__image" alt="Attractions">
</div>
</div>
<!--Attractions Text Wrapper-->
<div class="attractions__textWrapper">
<p class="attractions__text"></p>
</div>
</div>
<!--Attractions End-->
</div>
<section class="modals">
<!--Big Ben Modal-->
<div id="BigBen_modal" class="modal">
<div class="modal__innerWrapper">
<div class="modal__content">
<h3 class="modal__heading">Big Ben</h3>
<div class="modal__imageWrapper">
<img class="modal__image" src="images/BigBen.jpg" alt="Big Ben">
</div>
<div class="modal__textWrapper">
<p class="modal__text">Whenever you think of London, you probably think of Big Ben, as it is one of England's most recognized landmarks.</p>
<p class="modal__text">Here are some <em>Quick Facts</em> about Big Ben:</p>
<p class="modal__text">Description: Big Ben is not actually the clock tower. It is the largest of the five bells inside of the clock tower</p>
<p class="modal__text">Location: It is at the House of Parliament in Westminster, London</p>
<p class="modal__text">Constructed; Completed in 1856, it took 13 years to build. It is about 315 feet high and hs 400 steps to reach the top</p>
<p class="modal__text">Tourists: Bet you didn't know that foreign tourists are not allowed to climb the 400 steps to the top of the tower, but native Englanders can arrange a tour through a member of parliament or a Lord. Please note that it is not wheelchair accessible.</p>
<p class="modal__text">Cost: Free</p>
<p class="modal__text --textCenter">Content from respective websites - For learning purposes only</p>
</div>
<p class="modal__close" aria-label="Close modal" role="button">
<span aria-hidden="true">×</span>
</p>
</div>
</div>
</div> <!--End of Modal-->
<!--London Zoo Modal-->
<div id="LondonZoo_modal" class="modal">
<div class="modal__innerWrapper">
<div class="modal__content">
<h3 class="modal__heading">London Zoo</h3>
<div class="modal__imageWrapper">
<img class="modal__image" src="images/londonzoo.jpg" alt="London Zoo">
</div>
<div class="modal__textWrapper">
<p class="modal__text"></p>
<p class="modal__text --textCenter">Content from respective websites - For learning purposes only</p>
</div>
<p class="modal__close" aria-label="Close modal" role="button">
<span aria-hidden="true">×</span>
</p>
</div>
</div>
</div> <!--End of Modal-->
<!--St. Paul's Cathedral Modal-->
<div id="StPaulsCathedral_modal" class="modal">
<div class="modal__innerWrapper">
<div class="modal__content">
<h3 class="modal__heading">St. Paul's Cathedral</h3>
<div class="modal__imageWrapper">
<img class="modal__image" src="images/StPaulsCathedral.jpg" alt="St. Paul's Cathedral">
</div>
<div class="modal__textWrapper">
<p class="modal__text"></p>
<p class="modal__text --textCenter">Content from respective websites - For learning purposes only</p>
</div>
<p class="modal__close" aria-label="Close modal" role="button">
<span aria-hidden="true">×</span>
</p>
</div>
</div>
</div> <!--End of Modal-->
<!--Tower of London Modal-->
<div id="TowerofLondon_modal" class="modal">
<div class="modal__innerWrapper">
<div class="modal__content">
<h3 class="modal__heading">Tower of London</h3>
<div class="modal__imageWrapper">
<img class="modal__image" src="images/toweroflondon.jpg" alt="Tower of London">
</div>
<div class="modal__textWrapper">
<p class="modal__text"></p>
<p class="modal__text --textCenter">Content from respective websites - For learning purposes only</p>
</div>
<p class="modal__close" aria-label="Close modal" role="button">
<span aria-hidden="true">×</span>
</p>
</div>
</div>
</div> <!--End of Modal-->
<!--British Museum Modal-->
<div id="BritishMuseum_modal" class="modal">
<div class="modal__innerWrapper">
<div class="modal__content">
<h3 class="modal__heading">British Museum</h3>
<div class="modal__imageWrapper">
<img class="modal__image" src="images/BritishMusuem.jpg" alt="British Museum">
</div>
<div class="modal__textWrapper">
<p class="modal__text"></p>
<p class="modal__text --textCenter">Content from respective websites - For learning purposes only</p>
</div>
<p class="modal__close" aria-label="Close modal" role="button">
<span aria-hidden="true">×</span>
</p>
</div>
</div>
</div> <!--End of Modal-->
<!--London Eye Modal-->
<div id="LondonEye_modal" class="modal">
<div class="modal__innerWrapper">
<div class="modal__content">
<h3 class="modal__heading">London Eye</h3>
<div class="modal__imageWrapper">
<img class="modal__image" src="images/londoneye.jpeg" alt="London Eye">
</div>
<div class="modal__textWrapper">
<p class="modal__text"></p>
<p class="modal__text --textCenter">Content from respective websites - For learning purposes only</p>
</div>
<p class="modal__close" aria-label="Close modal" role="button">
<span aria-hidden="true">×</span>
</p>
</div>
</div>
</div> <!--End of Modal-->
<!--London Aquarium Modal-->
<div id="LondonAquarium_modal" class="modal">
<div class="modal__innerWrapper">
<div class="modal__content">
<h3 class="modal__heading">London Aquarium</h3>
<div class="modal__imageWrapper">
<img class="modal__image" src="images/London Aquarium.jpg" alt="London Aquarium">
</div>
<div class="modal__textWrapper">
<p class="modal__text"></p>
<p class="modal__text --textCenter">Content from respective websites - For learning purposes only</p>
</div>
<p class="modal__close" aria-label="Close modal" role="button">
<span aria-hidden="true">×</span>
</p>
</div>
</div>
</div> <!--End of Modal-->
<!--Westminster Abbey Modal-->
<div id="WestminsterAbbey_modal" class="modal">
<div class="modal__innerWrapper">
<div class="modal__content">
<h3 class="modal__heading">Westminster Abbey</h3>
<div class="modal__imageWrapper">
<img class="modal__image" src="images/WestminsterAbbey.jpg" alt="Westminster Abbey">
</div>
<div class="modal__textWrapper">
<p class="modal__text"></p>
<p class="modal__text --textCenter">Content from respective websites - For learning purposes only</p>
</div>
<p class="modal__close" aria-label="Close modal" role="button">
<span aria-hidden="true">×</span>
</p>
</div>
</div>
</div> <!--End of Modal-->
<!--Thames River Cruise Modal-->
<div id="ThamesRiverCruise_modal" class="modal">
<div class="modal__innerWrapper">
<div class="modal__content">
<h3 class="modal__heading">Thames River Cruise</h3>
<div class="modal__imageWrapper">
<img class="modal__image" src="images/ThamesRiverCruise.jpg" alt="Thames River Cruise">
</div>
<div class="modal__textWrapper">
<p class="modal__text"></p>
<p class="modal__text --textCenter">Content from respective websites - For learning purposes only</p>
</div>
<p class="modal__close" aria-label="Close modal" role="button">
<span aria-hidden="true">×</span>
</p>
</div>
</div>
</div> <!--End of Modal-->
<!--Wellington Arch Modal-->
<div id="WillingtonArch_modal" class="modal">
<div class="modal__innerWrapper">
<div class="modal__content">
<h3 class="modal__heading">Wellington Arch</h3>
<div class="modal__imageWrapper">
<img class="modal__image" src="images/WellingtonArch.jpg" alt="Wellington Arch">
</div>
<div class="modal__textWrapper">
<p class="modal__text"></p>
<p class="modal__text --textCenter">Content from respective websites - For learning purposes only</p>
</div>
<p class="modal__close" aria-label="Close modal" role="button">
<span aria-hidden="true">×</span>
</p>
</div>
</div>
</div> <!--End of Modal-->
<!--Harrods Modal-->
<div id="Harrods_modal" class="modal">
<div class="modal__innerWrapper">
<div class="modal__content">
<h3 class="modal__heading">Harrods</h3>
<div class="modal__imageWrapper">
<img class="modal__image" src="images/Harrods.jpg" alt="Harrods">
</div>
<div class="modal__textWrapper">
<p class="modal__text"></p>
<p class="modal__text --textCenter">Content from respective websites - For learning purposes only</p>
</div>
<p class="modal__close" aria-label="Close modal" role="button">
<span aria-hidden="true">×</span>
</p>
</div>
</div>
</div> <!--End of Modal-->
<!--Shopping Modal-->
<div id="Shopping_modal" class="modal">
<div class="modal__innerWrapper">
<div class="modal__content">
<h3 class="modal__heading">Shopping</h3>
<div class="modal__imageWrapper">
<img class="modal__image" src="images/Shopping.jpg" alt="Shopping">
</div>
<div class="modal__textWrapper">
<p class="modal__text"></p>
<p class="modal__text --textCenter">Content from respective websites - For learning purposes only</p>
</div>
<p class="modal__close" aria-label="Close modal" role="button">
<span aria-hidden="true">×</span>
</p>
</div>
</div>
</div> <!--End of Modal-->
</section>
</main>
<!-- Main End -->
<footer id="footer" class="footer"></footer>
<!--Footer End -->
<script src="scripts/cookies.js"></script>
<script src="scripts/main.js"></script>
<script src="scripts/select_list.js"></script>
<script src="scripts/banner.js"></script>
<script src="scripts/london.js"></script>
<script>displayLondonTime();</script>
</body>
</html>
Here is my Javascript:
const LondonAttractions = {
LondonZoo: "London Zoo",
BigBen: "Big Ben",
StPaulsCathedral: "St. Paul's Cathedral",
TowerofLondon: "Tower of London",
BritishMuseum: "British Museum",
LodonEye:"London Eye",
LondonAquarium: "London Aquarium",
WestminsterAbbey: "Westminster Abbey",
ThamesRiverCruise: "Thames River Cruise",
WellingtonArch: "Willington Arch",
Harrods: "Harrods",
Shopping: "Shopping"
};
const travelerForm = document.getElementById('travelerForm');
const travelerFormCheckboxWrapper = document.querySelector('#travelerForm .form__inputWrapper--checkboxes');
const attractionLinksHeading = document.getElementById('attractionLinks__heading');
const attractionLinksList = document.getElementById('attractionLinks__list');
const attractionLinksButton = document.getElementById('attractionLinks__showForm');
function generateCheckboxes() {
//If all the required parts exist
if(travelerForm && travelerFormCheckboxWrapper){
//For each daytrip in daytripsInfo
for(let key in LondonAttractions){
let checkbox = `
<div class="form__checkboxWrapper">
<label for="${key}" class="form__label">${LondonAttractions[key]}</label>
<input id="${key}" name="${key}" class="form__input" type="checkbox" placeholder="">
</div>
`;
travelerFormCheckboxWrapper.insertAdjacentHTML('beforeend', checkbox);
}//End of Foor Loop
} //End of if statement
} //End of function
generateCheckboxes();
if(travelerForm) {
travelerForm.addEventListener('submit', function(event) {
// Prevent the form from submitting
event.preventDefault();
var numChecked = 0;
const checkboxes = document.querySelectorAll('#travelerForm [type="checkbox"]');
// Loop over checkboxes
for(let i = 0; i < checkboxes.length; i++) {
// Check if the checkbox is checked
if(checkboxes[i].checked === true) {
// Increment numChecked variable
numChecked++;
//Set a cookie using the checkbox name
Cookies.set(checkboxes[i].name, true, {expires: 7});
}
//If a checkbox is not selected
else{
//If a cookie exists for that checkbox
if(Cookies.get(checkboxes[i].name)) {
//Delet the Cookie
Cookies.remove(checkboxes[i].name);
}
//Note: An alternative would be to set the cookie value to 'false'
//Cookies.set(checkboxes[i].name, false, { expires: 7});
}
}
if(numChecked > 0 && travelerForm.checkValidity()) {
Cookies.set('travelerName', travelerForm.fullName.value, { expires: 7});
// Submit the form
travelerForm.submit();
// Reset numChecked variable
numChecked = 0;
}
else if(numChecked === 0) {
alert('You must select at least one London attraction!');
}
});
}
//If both the 'travelerName' cookie and the attraction links heading exist
if(Cookies.get('travelerName') && attractionLinksHeading){
attractionLinksHeading.textContent = `Attraction Links for ${Cookies.get('travelerName')}`;
} else if(attractionLinksHeading) {
attractionLinksHeading.textContent = "Attraction Links";
}
if(attractionLinksList && travelerForm) {
//Show form by default
var showForm = true;
//For each of our attractions
for(let key in LondonAttractions) {
//If the cookie name esists
if(Cookies.get(key)) {
//Create our list item and link
let item = `<li class="attractionLinks__item">
<p data-reveal="${key}_modal" aria-controls="${key}" aria-haspopup="true" class="attractionLinks__link" role="button" tabindex="0">${LondonAttractions[key]}</p>
</li>`;
//Add the list item and link to the list
attractionLinksList.insertAdjacentHTML('beforeend', item);
//They have already submitted their preferences, hide from for now
showForm = false;
}
}
if(showForm === false) {
//Add modifier class that will be used to hide the form
travelerForm.classList.add('--hide');
}
const attractionLinks = document.querySelectorAll('.attractionLinks__link');
if(attractionLinks.length > 0) {
//If at least one link exists
for(let i = 0; i < attractionLinks.length; i++) {
//Get link data-reveal attribute
let id = attractionLinks[i].dataset.reveal;
//If the link has the data-reveal attribute, and there is a modal element with that matching ID
if(id && document.getElementById(id)) {
let modal = document.getElementById(id);
let closeButton = modal.querySelector('.modal__close');
//Add click event listner to link
attractionLinks[i].addEventListener('click', function(event) {
//If the modal exists and it does not have the --reveal class
if(!modal.classList.contains('--reval')) {
modal.classList.add('--reval');
}
});
//If close button exists within modal
if(closeButton) {
//Add click event listner to close button
closeButton.addEventListener('click', function(event) {
//If the modal had the --reveal class
if(modal.classList.contains('--reveal')) {
//Remove it (hides the modal)
modal.classList.remove('--reveal');
}
});
}
}
}
}
}
//If the button and the form both exist
if(attractionLinksButton && travelerForm) {
attractionLinksButton.addEventListener('click', function(event) {
//Check if the traveler form has the --hide class
if(travelerForm.classList.contains('--hide')) {
//Remove the --hide class
travelerForm.classList.remove('--hide');
//Add the --show class
travelerForm.classList.add('--show');
}
});
}
london.js -> Line 134 /* Problem */
If you add "--reveal" to the classList, that would make the class="initial --reveal"; //there is a space between initial and --reveal
Because on that line the css won't trigger
london.css -> line 82
To fix the problem:
//To solve the problem delete the line 134 from london.js and replace with
modal.className += '--reveal';
I have a slider which consists of products.
Right now I'm getting a list of products from the server and populating that slider with the result returned from the server. For this I have the following
<div class="most_buy_slider container special_proposal">
<div v-for="product in mostBoughtProducts">
<div>
<div class="goods_item">
<img :src="product.ProductPreviewImages[0]">
<div class="name">
{{product.Name}}
<span>{{product.Manufacturer}}</span>
</div>
<div class="price">{{product.Price}} грн</div>
<div class="economy">економія складає 57% від роздрібної вартості</div>
<div class="to_cart">
<button type="button" class="btn but_blue">в кошик</button>
</div>
</div>
</div>
</div>
</div>
But this result in the following:
however, when I render simple html without v-for it loads correctly.
<div class="most_buy_slider container bigger_width special_proposal">
<div>
<div v-for="index in 10" class="goods_item">
<img src="images/samples/whiskyjackdan.png">
<div class="name">
Вологі серветки Вологі серветки Вологі серветки Вологі серветки
<span>Ruta Selecta Ruta SelectaRuta SelectaRuta Selecta</span>
</div>
<div class="price">
45,55 грн
</div>
<div class="economy">
економія складає 57% від роздрібної вартості
</div>
<div class="to_cart">
<button type="button" class="btn but_blue">в кошик</button>
</div>
</div>
</div>
<div>
<div class="goods_item">
<img src="images/samples/ruta1.png">
<div class="name">
Вологі серветки
<span>Ruta Selecta</span>
</div>
<div class="price">
45,55 грн
</div>
<div class="economy">
економія складає 57% від роздрібної вартості
</div>
<div class="to_cart">
<button type="button" class="btn but_blue">в кошик</button>
</div>
</div>
</div>
I don't know your CSS, but in first code snippet you included you use additional div for v-for directive, that can break your styles.
Try this code instead:
<div class="most_buy_slider container special_proposal">
<div v-for="product in mostBoughtProducts">
<div class="goods_item">
<img :src="product.ProductPreviewImages[0]" />
<div class="name">
{{ product.Name }}
<span>{{ product.Manufacturer }}</span>
</div>
<div class="price">{{ product.Price }} грн</div>
<div class="economy">економія складає 57% від роздрібної вартості</div>
<div class="to_cart">
<button type="button" class="btn but_blue">в кошик</button>
</div>
</div>
</div>
</div>
I finally solved the problem
I was using Slick slider to display items. While data is being loaded from the server, the slick slider already gets initialized with 0 item in it. And when items has been loaded from the server, vue.js inserts data into the slider, but the slider still assumes that it has 0 item.
So the solution is to reinitialize the slick slider when data loaded from the server.
I called the following after the data load:
reInit() {
$('.most_buy_slider').slick('unslick');
$(".most_buy_slider").slick(this.sliderSettings())
}
sliderSettings() {
return {
infinite: true,
slidesToShow: 4,
slidesToScroll: 1
}
}
I'm trying to do something like this: https://nomadlist.com/
Rows of 3 elements (cards?) Going from top to bottom. Same size, perfectly aligned.
I'm using Handlebars and Bulma CSS, and the card components and doing this:
<div class="columns">
{{#each serverElements}}
<div class="column">
<div class="card">
<header class="card-header">
<p class="card-header-title">
{{this.title}}
</p>
<a class="card-header-icon">
<span class="icon">
<i class="fa fa-angle-down"></i>
</span>
</a>
</header>
<div class="card-content">
<div class="content">
{{this.body}}
<a>#bulmaio</a>. <a>#css</a> <a>#responsive</a>
<br>
<small>this.createdAt</small>
</div>
</div>
<footer class="card-footer">
<a class="card-footer-item">Save</a>
<a class="card-footer-item">Edit</a>
<a class="card-footer-item">Delete</a>
</footer>
</div>
</div>
{{/each}}
</div>
And it partially works. Each of the elements gets its own card. But this prints them all on the same row. And with different sizes.
If i understand you right, You sould use the is-multiline modifier with the right column, if you want 3 in a row, then use `column is-4'.
I have 3 columns of data, each with 2 rows inside. I would like to make to transform 3x2 table into 1x6 table, when the width of the screen is less than some value. Any idea how to achieve this?
My column has the following structure:
<div class="one-third animate_afl">
<div class="w-iconbox custom_img iconpos_left size_big type_default color_primary">
<div class="w-iconbox-link" >
<div class="w-iconbox-icon">
<i class="fa fa-"></i>
<img src="wp-content/uploads/2015/04/9-over.png" alt="">
</div>
<h4 class="w-iconbox-title">Title</h4>
</div>
<div class="w-iconbox-text">
<p>Paragraph text.</p>
</div>
</div>
<div class="g-hr type_invisible">
<span class="g-hr-h">
<i class="fa fa-star"></i>
</span>
</div>
<div class="w-iconbox custom_img iconpos_left size_big type_default color_primary">
<div class="w-iconbox-link">
<div class="w-iconbox-icon">
<i class="fa fa-"></i>
<img src="wp-content/uploads/2015/04/modul1-over.png" alt="">
</div>
<h4 class="w-iconbox-title">Title 2</h4>
</div>
<div class="w-iconbox-text">
<p>Paragraph text 2.</p>
</div>
</div>
<div class="w-iconbox custom_img iconpos_left size_big type_default color_primary">
<div class="w-iconbox-text"></div>
</div>
</div>
This would surely involve CSS media queries, which allow you to do this very thing. You can even set multiple break-widths where your css can change for each width you want, as many as you want.
I would like to use the url address bar(IE7 nad 8), for simulating a tab click.
Some parts of the html section for the webpage as follows. for the tabscroller, debugTabs-tabScroller, when the page opens, always the tab "Main" is selected. I would like to use the address url bar, using a js code so that "Debug Probe", tab is clicked. I tried the below(after the page is loaded) but doesnt seem to work.
javascript:document.getElementById('debugTabs-Probe-tab').click()
part of the html section.
var debugTabs = new dptabs.TabSet(
"debugTabs",
["Main","Probe","Conformance"],
[]
);
.
....
...
<div id="genericDetailTabs" class="genericDetailTabs">
<div id="debugTabs-tabSet" class="tabSet">
<div id="debugTabs-tabScrollLeftArrow" class="tabScrollLeftArrow" onmouseover="debugTabs.startScroll(1);" onmouseout="debugTabs.stopScroll()" onmousedown="debugTabs.setScrollSpeed(2);" onmouseup="debugTabs.setScrollSpeed()">
</div>
<div id="debugTabs-tabScroller" class="tabScroller">
<div class="tab" id="debugTabs-Main-tab" onclick="debugTabs.clickTab('Main');">
<span class="tab-wrap-1">
<span class="tab-wrap-2">
<span class="tab-wrap-3">Main</span>
</span>
</span>
</div>
<div class="tab" id="debugTabs-Probe-tab" onclick="debugTabs.clickTab('Probe');">
<span class="tab-wrap-1">
<span class="tab-wrap-2">
<span class="tab-wrap-3">Debug Probe</span>
</span>
</span>
</div>
<div class="tab" id="debugTabs-Conformance-tab" onclick="debugTabs.clickTab('Conformance');">
<span class="tab-wrap-1">
<span class="tab-wrap-2">
<span class="tab-wrap-3">Conformance Validation</span>
</span>
</span>
</div>
</div>
<div id="debugTabs-tabScrollRightArrow" class="tabScrollRightArrow" onmouseover="debugTabs.startScroll(-1);" onmouseout="debugTabs.stopScroll()" onmousedown="debugTabs.setScrollSpeed(2);" onmouseup="debugTabs.setScrollSpeed()">
</div>
</div>
</div>