How to activate the tab when I click the link on the other page like:
when i click www.wakeke.com#go-to-tab2 the page will go to www.wakeke.com#go-to-tab2 and the tab 2 is activated.
here is my sample:
<div class="section group">
<div class="col span_1_of_4"> <!-- tab 1 -->
<img src="http://wakeke.com/media/wysiwyg/call_center.png" alt="" />
<h3>sample</h3>
<p>sample/p>
</div>
<div class="col span_1_of_4"> <!-- tab 2 -->
<img src="http://wakeke.com/media/wysiwyg/marketing.png" alt="" />
<h3>sample</h3>
<p>sample/p>
</div>
</div>
and here is the tab code:
<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
<li class="active"><a href="#business" data-toggle="tab"><img src="http://wwww.wakeke/media/wysiwyg/call_center_thumb.png" alt="" />
<div class="job-desc">
<h4>sample</h4>
<h5>sample</h5>
</div>
</a></li>
<li><a href="#marketing" data-toggle="tab"><img src="http://www.wakeke/media/wysiwyg/business_dev_thumb.png" alt="" />
<div class="job-desc">
<h4>sample</h4>
<h5>sample</h5>
</div>
</a></li>
</ul>
</div>
here is the image sample:
When I click the image:
image1
it will go to another page and the tab is activated
image 2
Please help me. :)
thank you
You can use the JavaScript location.hash and some usefull jQuery this way:
<script>
$(document).ready(function(){
if(window.location.hash!=""){
// Get the hash value and remove the # from it.
var hash = window.location.hash.substr(1);
// In the nav-tabs,
// find the right tab by targetting the `h4` which contains the word you used has a hash
// and click it.
$(".nav-tabs").find("li h4:constains('"+hash+"')").click();
}
});
</script>
So now, since you provided only a sample,
You will have to find the right words to use as a hash for each tabs.
Be carefull about case sensitivity.
Use one words contained in the h4 tag inside the li (the tab) that you want to be active.
This small script must be in the page where tabs are... Anywhere in the <body>.
It takes the hash from the URL and remove the # character.
Then it uses it to find a tab.
It may find more than one! Which will not do what you want.
I think it is a good starter for you to try.
I didn't test this code as I'm used to do before posting here... So I hope there is no mistake.
;)
If you do not already use it, you have to include the jQuery library in your <head> like this:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
EDIT
I just noticed that you are using the same hash in the anchor's href.
So here is a variant of the same thing that should avoid the possibility of clicking more than one tab.
<script>
$(document).ready(function(){
if(window.location.hash!=""){
// Get the hash value keeping the #.
var hash = window.location.hash;
// In the nav-tabs,
// find the right tab by targetting the `a` which has the same href as your hash
// and click it.
$(".nav-tabs").find("li a[href='"+hash+'"]").click();
}
});
</script>
Related
I've tried to use jQuery's load() function to change/load content without reloading. That works, but the problem is: the URL keeps the same!
Even if i use history.pushState() to change URL, that does not solve the problem. Example:
with the famous window.history.pushState("object or string", "Title", "/new-url");
With that, I am creating a "fake URL" for each page - If I try to enter the website with this changed URL again, i get an error, basically the link does not exist;
If I refresh the page, i lost all Ajax loaded content - I need to keep the content when refresh;
When I click to change Ajax loaded page, keeps putting new links next to the previous one, as in the image sent;
I want to get this result: https://reactjs.org/ - transiting the pages, they do not reload and the link changes, it is updatable and the link works separately - how do i do it?
3) printscreen of my page and its url
Important: index.html, about.html and contact.html are existing files that will load with the jquery function below.
HTML:
<div class="navbar">
<div class="content">
<div class="logo">My logo</div>
<ul class="pages">
<li id="index">Index</li>
<li id="about">About us</li>
<li id="contact">Contact</li>
</ul>
</div>
</div>
<section id="page">
<div class="content">
<!-- PAGES LOAD HERE -->
</div>
</section>
<div class="footer">
<div class="content">
--Footer-- All rights reserved.
</div>
</div>
JS:
$(document).ready(function () {
$('li').on("click", function () {
$pageName = $(this).attr('id');
$('#page .content').load(`pages/${$pageName}.html`);
$('li').removeClass('active'); //only to remove the selection of actual page in CSS
$(this).addClass('active'); //only to add the selection of actual page in CSS
window.history.pushState("object or string", "Title", `pages/${$pageName}.html`);
})
})
you're describing "routing" which is the idea of URLs matching the content that is being display.
In jquery i'd recommend googling: jquery router or javascript router
IF you're writing other languages you can google [language] router.
most recently google is bringing up https://www.npmjs.com/package/jqueryrouter which is now forwarding to https://github.com/scssyworks/silkrouter
Once you choose a router, read the docs and come back with more questions.
So I have a number of dropdown links on my main navigation that need to link to other landing pages and scroll or show specific part of that page, like an article or a specific service. I have went through a lot of examples here but can't get this to work:
<a class="dropdown-item" href="#" onclick="location.href = '/voice-data#broadband/'">BROADBAND & MANAGED INTERNET</a>
The above link should anchor to this div on another page:
<div class="row broadband-block" id="#broadband">
At the moment it lands on the page it needs but doesn't go to the anchor div that it's supposed to,but it does add #broadband to the url in the browser. What am I doing wrong and what would be the best solution, as I have quite a few links like that to do?
Your problem is the ID attribute. Remove the # from your ID and it should fix your problem:
<div class="row broadband-block" id="#broadband">
<div class="row broadband-block" id="broadband">
Or adjust your 'a' tag and add an extra '#' to the front of your url:
<a class="dropdown-item" href="#" onclick="location.href = '/voice-data##broadband/'">BROADBAND & MANAGED INTERNET</a>
Also, javascript onclick not needed unless this is what your application environment requires, it can all be done inside href attribute.
you should do this
<a class="dropdown-item" href="/voice-data/#broadband">BROADBAND & MANAGED INTERNET</a>
just use the href instead of onclick.
and the ids should match, at the current state you should be using ##broadband
while you should use the id as follows:
<div class="row broadband-block" id="broadband">
Edit: #pointy pointed it out (no pun intended)
I have an HTML page in which there are list of images around 4-5. The HTML code of individual image (item-detail.component.html) is shown below:
<span class="badge" id="heart-badge{{item.$id}}">
<div (click)="badgeHeartEmpty()" id="heartHide{{item.$id}}">
<img id="badge-item-heart-noborder-empty" src="/assets/images/Empty-Heart.png">
</div>
<div [style.display]= " 'none' " (click)="badgeHeartFull()" id="heartShow{{item.$id}}">
<img id="badge-item-heart-noborder-full" src="/assets/images/Full-Heart-Blue.png">
</div>
</span>
<!-- This is the code which shows item images and item details -->
<a href="/attendee-item/{{item.$id}}">
<img class="card-img-top" src="{{item.image_url}}" alt="Card image cap" id="card-img">
<div class="card-body">
<div class="auction-item-title">
<h1 id="auction-item-title">{{item.name}}</h1>
</div>
<div class="auction-item-bid-title">
<div class="auction-item-title-left">
<p id="auction-item-bid-title">Current Bid: ${{item.bid}}</p>
<p id="auction-item-bid-title">Value: ${{item.value}}</p>
</div>
<div class="auction-item-title-right">
<p id="auction-item-bid-title2">About this item</p>
</div>
</div>
</div>
</a>
<bid-button [item]="item"></bid-button>
Now if I click above item (as you can see there is a href tag on it) then it shows me detailed description of that image on a new page and that page also has a back button at the top. Below is the code for back button on that new page:
<div class="item-top-bar">
<div class="item-back-bar">
<!-- This is the back button and it takes me to home page but instead it should take me to section of image where I was there and clicked it -->
<p id="item-back-bar-link"><a id="item-back-bar-link" href="/attendee-home"><</a></p>
</div>
<div class="item-pagination-bar">
<a (click)="prevItem()"><p id="item-pagination-bar-text">LAST ITEM</p></a>
<a (click)="nextItem()"><p id="item-pagination-bar-text">NEXT ITEM</p></a>
</div>
</div>
Problem Statement:
Now if I click back button then it takes me to the home page but instead what I want is it should take me to the section of image where I was before.
Is this possible to do? I mean if I have may sections of images and if I click lets say 4th image then it will open detailed description of that fourth image page and now if I press back button then it should take me to fourth section of image where I was before.
If you want to go back, you should use the back() function in javascript
function goBack() {
window.history.back();
}
<button onclick="goBack()">Go Back</button>
Here is a small example of how to use it, now you can just adapt it to your page
You can do that by adding the id here
<p id="item-back-bar-link">
<a id="item-back-bar-link" href="/attendee-home/{{id}}">
// ....
</a>
</p>
Now there are multiple way to get the id. You can use the window.location properties or if in same component pass this id to a property binding
Here is how I would do it.
On a separate note, having the same ID across multiple levels may not be a good idea.
<div class="item-back-bar">
<!-- This is the back button and it takes me to home page but instead it should take me to section of image where I was there and clicked it -->
<p id="item-back-bar-link"><a id="back" href="#">Back</a></p>
</div>
<script>
window.document.getElementById('back').addEventListener('click', function(e){
window.history.back();
e.preventDefault();
});
</script>
Angular has Location which is a service that applications can use to interact with a browser's URL. It is what you need in order to solve your problem.
See implementation below.
<div class="item-back-bar">
<!-- This is the back button and it takes me to home page but instead it should take me to section of image where I was there and clicked it -->
<p id="item-back-bar-link"><a id="back" (click)="goBackClicked()">Back</a></p>
</div>
Your ts file should have these lines.
import {Component} from '#angular/core';
import {Location} from '#angular/common';
#Component({
// component's declarations here
})
class SomeComponent {
constructor(private _location: Location) {
}
goBackClicked() {
this._location.back();
}
}
y not just get the position of the image when it is clicked with .position() and when returned from the image to the page you can get back to the same position with $(window).scrollTop(value).
If your page is scrolled and you want to maintain your scroll position while coming back from the detailed description page, then you can store the current page's vertical scroll position in a service and while navigating back, you can set the scroll position back from service.
Link to ScrollTop in MDN. Also Check Window.To for scrolling.
Sample Angular project to show Element.ScrollTop: https://stackblitz.com/edit/angular-qdjmny.
Click page1, scroll the sample list to navigate, when u com back, the scoll will be maintained.
Also make sure, in your [routerLink] of your detailed description page you are linking to the item-detail.component.html component.
Really theses comments are right. If you want go back page you can use the command window.history.go(-1) or window.history.back()
You can use an anchor tag for this. You need to give the part of the page you go back to an "id", like "gobackto_id". Then you can use this in your "" element in the "href" like this:
<a href="http://www.mypage.be/home#gobackto_id".
I have searched around but no question seems to address this concern.
I have the following markup:
<li>
<div class="box-brochure-slide" onclick="window.location='product.php?item=TEC%2FSR-888HP-SS';">
<div class="boxInner-item">
<div class="triangle-topright-cover"></div>
<div class="triangle-topright-red"></div>
<div class="label-limitedsets">LIMITED SETS</div>
<img class="lazy" alt="" src="img/pixel.png" data-original="user/picture/TEC-SR-888HP-SS.jpg">
<div class="ui content">
<div class="productbrand">TECNO</div>
<div class="productname">TECNO SR-888HP-SS 2 X HI POWER BURNERS, 1 X MED BURNER, <br>BATTERY AUTO IGNITION</div>
<div class="price">
<div class="specialprice"><div class="specialprice-name">Crazy Price</div><span class="pricecurrency">$</span>488<span class="pricecents">00</span></div>
<div class="usualprice">U.P. $588.00</div>
</div>
</div>
</div>
</div>
</li>
However, when I try to right click on the <li> on the web page, there was not an option for me to open in a new tab. What is wrong with the markup here?
Edit: I have read in some sources that <a> would solve the problem, but I do not wish to wrap the entire <li> in an anchor tag. Is there a way to do this?
Note: I do not wish to right click to OPEN in a new tab. I just wish to have an option available to open in a new tab when I right click on it.
Although you don't want to use the element but if you replace the topmost div with "a" leaving the class id and css intact, you will get the same look and feel with the option of "open in new tab" as well.
For that purpose you need to use <a> tag and pass the href property to the tag
To Open in new tab on right click first we need to check the mouse click event and then open the link.
<div id="open">open</div>
$('#open').mousedown(function(event) {
if(event.which == 3) { //Right click event
window.open('http://google.com','_newtab'); // To open in new tab
} else{
alert('Please Right click to open');
}});
Working Code Pen
I have a tab system in HTML that uses the following javascript:
(function() {
var $tabsNav = $('.tabs-nav'),
$tabsNavLis = $tabsNav.children('li'),
$tabContent = $('.tab-content');
$tabContent.hide();
$tabsNavLis.first().addClass('active').show();
$tabContent.first().show();
$tabsNavLis.on('click', function(e) {
var $this = $(this);
$tabsNavLis.removeClass('active');
$this.addClass('active');
$tabContent.hide();
$( $this.find('a').attr('href') ).fadeIn();
e.preventDefault();
});
})();
The HTML Markup is:
<ul class="tabs-nav">
<li class="active">
TAB 1
</li>
<li>
TAB 2
</li>
<li>
TAB 3
</li>
</ul><!-- end .tabs-nav -->
<div class="tabs-container">
<div class="tab-content" id="1">
CONTENT OF TAB 1
</div><!-- end #tab1 -->
<div class="tab-content" id="2">
CONTENT OF TAB 2
</div><!-- end #tab2 -->
<div class="tab-content" id="3">
CONTENT OF TAB 3
</div><!-- end #tab3 -->
The UL are the names of the tabs, when you click one they take you to the content of that tab. As you can see when you click a tab the link is www.thepage.com#tab1 etc but in the adress bar doesnt appear anything. I want to be able to go to thepage.com#tab2 and to show the tab 2, but this isnt working.
I had searched different methods like window.location in javascript or pushstate in html5 posted in this page but I didnt know how to make them function. It will be best to use thepage.com/tab1 and not the hash tag for SEO purposes. I know you can achieve this with the pushstate in html5 like:
window.history.pushState(“object or string”, “Title”, “/new-url”);
If you use the pushstate html5 feature it won't work with IE8 and other older browsers, but if you just want to be able to have ajaxy-history you can use the hash portion of the url. You can modify the hash of the url by using:
window.location.hash="mytabid";
// url will be http://foo.com/#mytabid
Using this inconjuction with the hash change event (you'll probably want to use jQuery or a plugin to handle cross-browser event issues) you can react on the use of the back button or when the page loads by accessing the location.hash property.
window.onhashchange = function(a){
console.log(a); //probably easiest to access the location.hash here.
}