I have a list of links on a services page that when clicked, reveal content relevant to the individual service. This is to save space on the page. I have done this using slide in JS.
On the homepage I also have a list of services that I would like to have linked the services page and then open up the relevant content dependant on service clicked on the homepage.
I'm a new user of Javascript so unfortunately this isn't something I could work out myself or find a solution for elsewhere. I would really appreciate somebody helping me to find a way of doing this.
Find below a short example of my code:
Homepage
<ul id='homepage-services-list'>
<li><a href='services.php'>Service 1</a></li>
<li><a href='services.php'>Service 2</a></li>
</ul>
Services
<ul class='services-tabs'>
<li class='services-tab'>
<a class='service-1-trigger'>
<div>
<h3>Service 1</h3>
<img src='images/down-arrow-icon.png'>
</div>
</a>
</li>
<article class='service-1-content'>
<p>Content about service etc.</p>
</article>
<li class='services-tab'>
<a class='service-2-trigger'>
<div>
<h3>Service 2</h3>
<img src='images/down-arrow-icon.png'>
</div>
</a>
</li>
<article class='service-2-content'>
<p>Content about service etc.</p>
</article>
</ul>
Javascript - JQuery
$(document).ready(function(){
$(".service-1-trigger").click(function(){
$(".service-1-content").slideToggle(600, function(){
$(this).toggleClass("service-1-toggle").css('display',' ');
});
});
$(".service-2-trigger").click(function(){
$(".service-2-content").slideToggle(600, function(){
$(this).toggleClass("service-2-toggle").css('display',' ');
});
});
});
Thank you!
You can add anchors to your links.
<ul id='homepage-services-list'>
<li><a href='services.php#1'>Service 1</a></li>
<li><a href='services.php#2'>Service 2</a></li>
</ul>
With these anchors, you can extract from the URL the service wanted (1 or 2) and simulate a click with jQuery.
In your document.ready :
var url = document.location.toString();
if (url.indexOf('#') != -1) {
var num_service = url.split('#')[1];
$(".service-" + num_service + "-trigger").click();
}
Here's one way to approach it:
On the home page, add fragment identifiers to those links:
<ul id='homepage-services-list'>
<li><a href='services.php#service-1'>Service 1</a></li>
<li><a href='services.php#service-2'>Service 2</a></li>
</ul>
On page load (inside your ready handler will do) look at location.hash. That is the current fragment identifier for the page. If it's one of your service identifiers, trigger the code showing that service.
You might also have your click handlers add the hash to the URL by setting location.hash, for consistency.
Look also at the history API for more control over hashes and URLs for in-page transitions.
Short of switching to a SPA-type framework, there's no way for javascript on one page to directly affect a subsequently-linked page.
Two simple approaches to work around this are
Cookie / localStorage: Have your outgoing link set a cookie with a specific value for each link. The receiving page can check the value of this cookie and adjust as needed.
URL hash: Include a hash value or parameter in the outgoing links, i.e. <a href='services.php#service1'>. The receiving page can then check location.hash to read this value.
Related
I am trying to figure out how to detect what page I am on so I can add a selected class to my html with Jquery. I have tried a few bits of script but they have not worked. I am working on a local server and for now just need something that can somehow detect the page I am on and somehow link it to the li's. I'm not sure how to tackle it
HTML:
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li><img src="img/small-icons/access-icon.png" width="17" height="16" alt=""/>Access</li>
<li>Fader Layout</li>
<li>Patching</li>
<li>Wild Controls</li>
<li>Buses & Outputs</li>
<li class="submenu">Contribution
<ul class="sub-section">
<li class="go-back"><a>I AM BACK BUTTON for contribti</a></li>
<li><a>test</a></li>
<li><a>test</a></li>
</ul>
</li>
<li>Oscillator</li>
<li>Talkback</li>
<li>Meters</li>
<li>Automixer</li>
<li>Audio Follow Video</li>
</li>
<li class="submenu selected">test-page
<ul class="sub-section">
<li class="go-back"><a>Back to Main Menu</a></li>
<li><a>IwhatN</a></li>
<li><a>IwhatN</a></li>
</ul>
</li>
<li class="submenu">Control Surface
<ul class="sub-section">
<li class="go-back"><a>Back to Main Menu</a></li>
<li><a>IwhatN</a></li>
<li><a>IwhatN</a></li>
</ul>
</li>
</ul>
</div>
A solution would be to use get params with something like How to get query string params and form the URL's so that they append the param as ?page=mypage and then get the page name or ID with getParameterByName('page') and then check out where you handle your tabs and perform your desired stylings/actions.
This can also be handled from backend, depending on the backend technology you are using.
For example
if PHP, perhaps append the get params there or set specific $_SESSION['page'] variable and handle these clientside
if Django, it can be exported to context or, also appended to get params and handled in the template via javascript or template tags
...and many other possibilities.
If the question though refers to how to set a status based on what page you are on depends on where you want to set that status, for example you might write a script that when clicking a button/link it would first make an ajax POST request to your server sending the ID that you are interested in (setting it in the backend somewhere) and then redirect to wherever you need.
I want to refresh a mobile web page on-swipe. The html code is very basic, and just need the necessary jquery/javascript to get the swipe to reload the current page.
Here is the HTML: http://jsfiddle.net/yKpLJ/1/ I am pulling in jquery and jquery ui as well, but don't know how to move forward.
<div id="fact-footer">
<ul>
<li class="share facebook">
Share It
</li>
<li class="share twitter">
Tweet It
</li>
<li class="refresh">
Refresh Fact
</li>
<li class="logo">
Logo
</li>
</ul>
</div>
Thanks!
Check out HammerJS http://eightmedia.github.io/hammer.js/
Include the script on your page and then do something like this:
var element = $('body');
Hammer(element).on("swipeleft", function() {
location.reload();
});
I have an html menu with links to other pages which have this menu included too. Very basic:
<div id="sidebar-nav">
<ul id="dashboard-menu">
<li class="active">
<div class="pointer">
<div class="arrow"></div>
<div class="arrow_border"></div>
</div>
<a href="index.html">
<i class="icon-dashboard"></i>
<span>Home</span>
</a>
</li>
<li>
<a href="1.html">
<i class="icon-signal"></i>
<span>1</span>
</a>
</li>
<li>
<a href="2.html">
<i class="icon-picture"></i>
<span>2</span>
</a>
</li>
<li>
<a href="3.html">
<i class="icon-calendar-empty"></i>
<span>3</span>
</a>
</li>
</ul>
</div>
So basically this menu helps navigate through content.
When I load the home of the menu I want a function to automatically load the other links too so it speeds up the navigation and of course I want the content of those links to show up only when the corresponding link in the menu is clicked.
What library / function should I look into to achieve that?
Which Library or Function to use
You can see, in my code everything is jQuery. So in my advice, jQuery will be the best for you! You can have it here:
api.jquery.com or even at their site www.jquery.com You can have a quick link at their footer tag.
Pages will be cached
Your page and some of its code is saved as a cache in the local storage, you can check them out using F12. Which will open Developer Tools, then in Network workspace, check out which are loaded from Server and which are loaded from local storage. Almost every browser will save some of your code, from .css files or your scripts so that it doesn't have to load it everytime. You can see the code 304 (correct me, if mistaken) in browser which would mean that the file was loaded from local machine. So don't worry about this. You can get other helpfull articles about speeding up and caching the sessions too.
Dynamically Creating the menu
To dynamically create the link navigation menu you can use:
Example
$('#dashboard-menu').html();
In the HTML of the code, you can write the list items. Which will be set so that you get them. You can call this function on page start as:
Code Example
$(document).ready(function () {
$('#dashboard-menu').html();
}
Techniques
If you don't know what would be the menu, for example you want to load the data from Database, you can use ajax requests too, this way you will write the result in the dashboard-menu. However, your site won't get fast just by removing the navigation menu and laoding it after the page load.
For example:
$.ajax({
url: "page_to_load.html"
success: function (data) {
$('#dashboard-menu').html(data);
}
});
Alternate way of using Ajax
Alternate way for this is load().
http://api.jquery.com/load/
To show only relative menu
To show the content you can use show(). Like this, lets take the example from your code
Snippet from your code
<li>
<a href="1.html">
<i class="icon-signal"></i>
<span>1</span>
</a>
</li>
Showing child
To show the a from this; since a is a child of li, you can use this:
$('li').click(function () {
$(this).find('a').show(); // or even use toggle()
}
I want to add a language switcher to a specific html page. I don't need any language text only the link to another site will need to be changed depending on the click.
It wouldn't make much sense here to create three html pages just to deal with some link change but my jquery skills are not that great.
The destination structure looks like this:
<ul>
<li><a class="clickButton" href="folder1/firstLink/Languages/English/folder/index.html">Index Link</a></li>
<li><a class="clickButton" href="../folder2/secondLink/Languages/English/folder/index.html">A different Link </a></li>
<li><a class="clickButton" href="../../folder3/Languages/English/folder/index.html">Another different link</a></li>
<ul>
<ul>
<li><a class="clickButton" href="folder1/firstLink/Languages/Spanish/folder/index.html">Index Link</a></li>
...
<ul>
As you can see I would only need to replace the language name ("English") with Spanish in order to make the link work.
So I was thinking that the user clicks on the according flag and the url string changes accordingly.
I would be happy about some example how to switch the language name
HTML:
<a data-lang="Spanish">To Spanish</a>
<a data-lang="Russian">To Russian</a>
JavaScript:
var current = "English"
$("[data-lang]").on("click", function() {
var lang = $(this).data("lang");
$(".clickButton").prop("href", function(i, href) {
return href.replace(current, lang);
});
current = lang;
});
DEMO: http://jsfiddle.net/a2xqL/
make it easy for yourself: add custom data attribute to links;
<a data-lang="English" href="">
Than access it with jQuery by $link.data('lang'); and add it to the href.
I have a few tabs on a page that have this markup
<div id="holiday-details-nav">
<ul>
<li><a class="holidaydetails-description" title="Overview" href="#tab-holidaydetails-overview">Overview</a></li>
<li><a class="holidaydetails-included" title="Rooms" href="#tab-holidaydetails-rooms">Rooms</a></li>
<li><a class="holidaydetails-itinerary" title="Rates" href="#tab-holidaydetails-rates">Rates</a></li>
<li><a class="holidaydetails-accommodation" title="Information" href="#tab-holidaydetails-information">Information</a></li>
<li><a class="holidaydetails-reviews" title="Reviews" href="#tab-holidaydetails-reviews">Reviews</a></li>
</ul>
</div>
The hiding and showing of the content in these tabs are controlled by some JQuery code that begins thus
$(document).ready(function () {
// Hide all tabs apart from the overview
$('#holiday-details-tabs div:#tab-holidaydetails-rooms').hide();
$('#holiday-details-tabs div:#tab-holidaydetails-rates').hide();
$('#holiday-details-tabs div:#tab-holidaydetails-information').hide();
$('#holiday-details-tabs div:#tab-holidaydetails-reviews').hide();
...
The problem is that if I add, remove or rename tabs (like I have just done), then I have to change all this code. What I would like is to add, rename or remove as many tabs as I like but to not have to modify this JQuery code.
I'm not really looking for someone to code a solution for me but rather wanted to start a discussion on tools, techniques etc that can be used to avoid this sort of naming dependency.
EDIT
I also have this bit of ugliness for when a tab is clicked.
$('#holiday-details-nav ul li a').click(function () {
// Remove active class from all links
$('#holiday-details-nav ul li').removeClass('active');
//Set clicked link class to active
$(this).parent().addClass('active');
// Set variable currentTab to value of href attribute of clicked link
var currentTab = $(this).attr('href');
// Hide all tabs
$('#holidaydetails-description-imagecontainer').hide();
$('#holiday-details-tabs div:#tab-holidaydetails-overview').hide();
$('#holiday-details-tabs div:#tab-holidaydetails-rooms').hide();
$('#holiday-details-tabs div:#tab-holidaydetails-rates').hide();
$('#holiday-details-tabs div:#tab-holidaydetails-information').hide();
$('#holiday-details-tabs div:#tab-holidaydetails-reviews').hide();
$('#holiday-details-bottom').show();
$('#holiday-details-left-booknow').show();
// Show div with id equal to variable currentTab
$(currentTab).show();
$('#holidaydetails-description-imagecontainer').show();
return false;
});
Thanks,
Sachin
You could assign a common CSS class, say tab, to every li except overview, and then use a jQuery class selector to hide them all. For example:
<div id="holiday-details-nav">
<ul>
<li><a class="holidaydetails-description" title="Overview" href="#tab-holidaydetails-overview">Overview</a></li>
<li><a class="tab holidaydetails-included" title="Rooms" href="#tab-holidaydetails-rooms">Rooms</a></li>
<li><a class="tab holidaydetails-itinerary" title="Rates" href="#tab-holidaydetails-rates">Rates</a></li>
<li><a class="tab holidaydetails-accommodation" title="Information" href="#tab-holidaydetails-information">Information</a></li>
<li><a class="tab holidaydetails-reviews" title="Reviews" href="#tab-holidaydetails-reviews">Reviews</a></li>
</ul>
</div>
And then, to hide every tab except overview:
$("holiday-details-nav .tab").hide();
Or the other way around, that is, add a specific class to overview, and hide every other tab:
<div id="holiday-details-nav">
<ul>
<li><a class="overview holidaydetails-description" title="Overview" href="#tab-holidaydetails-overview">Overview</a></li>
<li><a class="holidaydetails-included" title="Rooms" href="#tab-holidaydetails-rooms">Rooms</a></li>
<li><a class="holidaydetails-itinerary" title="Rates" href="#tab-holidaydetails-rates">Rates</a></li>
<li><a class="holidaydetails-accommodation" title="Information" href="#tab-holidaydetails-information">Information</a></li>
<li><a class="holidaydetails-reviews" title="Reviews" href="#tab-holidaydetails-reviews">Reviews</a></li>
</ul>
</div>
Then, to hide, select all tabs, and exclude overview using .not():
$("#holiday-details-nav a").not(".overview").hide();
When dealing with tabs, especially in the setup you have (where the href attribute has the id of the div related to it), you don't need to hardcode anything, use the title attribute, or use any extra classes. Look at this:
http://jsfiddle.net/FAM2s/2/
All it does it find all of the tabs' detail divs and hide them all, then only show the one related to what was just clicked.
As long as you set the correct href attributes for the links, and set the corresponding divs with those id's, it will work, no matter how many tabs you add/remove whenever you want.