I'm trying to add a text hyperlink button that leads to different pages on different conditions..and I need help for the HTML code.
My website screenshot:
sorry the website is not in english, so I will be as specific as possible so anyone can understand what I'm saying.
The screenshot show a page from my website, and it contains tab filters on the products.
The highlighted element is the 'All' category tab, and next to it is the 'Audio' tab and 'Mic' tab and so on.
So right below the product catalog, which is beneath the category , I want to add a text hyperlink "See more" button, which will recognize which tab I am looking into at the moment, and take me to the full catalog page of the category.
All I know of HTML code for conditional html statement is like:
See More
With JS:
function doClick() {
if (clicked on "Audio" tab)
window.hlocation.href = "Audio Page URL.com"
else if (clickd on "Mic" tab)
window.location.href = "Mic Page URL.com"
....
else
window.location.href = "Last Page URL.com"
I know how to locate HTML codes to locate the division...but I'm not sure how to actually put them into codes as conditional statement.
I'm sharing the URL of my page : http://tantara.shop/main-shop/
please help.
You could decide to use this approach:
Record when the user selects a tab
Add a specific class when a tab is clicked. Make sure to remove all other tabs of this
specific class.
When the user clicks on "See more", we simply fetch the tab that has the specific class
It is demonstrated below:
$(document).ready(function() {
$("a").on('click', function() {
var selected = $("div .selected");
console.log("someurl.com/category/all/" + selected.text());
});
});
function update(element) {
ridOfOtherClass();
$(element).addClass("selected");
}
var buttons = $("div");
function ridOfOtherClass() {
for (var i = 0; i < buttons.length; i++) {
$(buttons[i]).removeClass("selected");
}
}
.as-console-wrapper{
max-height:50px !important;
/*Overrides so user is guaranteed space to click the "See more" button. DO NOT USE THIS CSS ON YOUR WEBSITE - IT IS STACK SNIPPET ONLY*/
}
div{
cursor:pointer;
}
a{
cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" id="wp-block-library-css" href="http://tantara.shop/wp-includes/css/dist/block-library/style.min.css?ver=5.6" type="text/css" media="all">
<div class="elementor-tabs-wrapper">
<div id="elementor-tab-title-1001" class="elementor-tab-title elementor-tab-desktop-title elementor-active elementor-repeater-item-c510f25 selected" data-tab="1" tabindex="1001" role="tab" aria-controls="elementor-tab-content-1001" onclick="update(this)">All</div>
<div id="elementor-tab-title-1002" class="elementor-tab-title elementor-tab-desktop-title elementor-repeater-item-97b56a1" data-tab="2" tabindex="1002" role="tab" aria-controls="elementor-tab-content-1002" onclick="update(this)">Audio Interface</div>
<div id="elementor-tab-title-1003" class="elementor-tab-title elementor-tab-desktop-title elementor-repeater-item-2658a88" data-tab="3" tabindex="1003" role="tab" aria-controls="elementor-tab-content-1003" onclick="update(this)">Monitor Speaker</div>
<div id="elementor-tab-title-1004" class="elementor-tab-title elementor-tab-desktop-title elementor-repeater-item-91a22ba" data-tab="4" tabindex="1004" role="tab" aria-controls="elementor-tab-content-1004" onclick="update(this)">MIC</div>
<div id="elementor-tab-title-1005" class="elementor-tab-title elementor-tab-desktop-title elementor-repeater-item-81bf58f" data-tab="5" tabindex="1005" role="tab" aria-controls="elementor-tab-content-1005" onclick="update(this)">Keyboard</div>
<div id="elementor-tab-title-1006" class="elementor-tab-title elementor-tab-desktop-title elementor-repeater-item-eb73db8" data-tab="6" tabindex="1006" role="tab" aria-controls="elementor-tab-content-1006" onclick="update(this)">Midi controller</div>
<div id="elementor-tab-title-1007" class="elementor-tab-title elementor-tab-desktop-title elementor-repeater-item-1a3ff00" data-tab="7" tabindex="1007" role="tab" aria-controls="elementor-tab-content-1007" onclick="update(this)">Accessory</div>
</div>
<a>See more</a>
<!-- Please understand that I did not understand any of the words in the untranslated version. As Google Translation has demonstrated considerable capabilities in translating properly, I chose to translate with that.-->
If you're not sure what's supposed to be happening, click on a tab and click "See more." An example URL will be shown, which can be customized into a GET request etc,.
Related
I am aware of both :visited and :active css classes, but both does not answer my need!
I want to remain the active link styled with Red Background Color (or whatever design) as long as the related page of the active link is active for the user.
Below is my code:
HTML:
<a class="link1" href="/page-1">Link 1</a>
<a class="link2" href="/page-2">Link 2</a>
<a class="link3" href="/page-3">Link 3</a>
<a class="link4" href="/page-4">Link 4</a>
CSS:
link2:visited {
background-color: red;
}
Or
link2:active {
background-color: red;
}
The :active class will take effect when the user click down the mouse button and end when the user will release up the mouse button.
The :visited class will remain the link with red background even after the user will click on another menu link.
so both :visited and :active css classes does answer my question !!!
The below images will explain more:
Link 2 is active
Link 4 is active
As you can see in the above images when another link on the menu is clicked/visited, the previous link design will be reverted back to its previous state and only the current clicked/visited link will have a red background color as long as its correspondent page is active.
we can use jquery to add class to each link when it is an active state. then we can style the link with the basis of that class.
checkout this link for reference: https://www.w3schools.com/jquery/html_addclass.asp
thank you.
If you can use javascript,
On each page, at the bottom, add:
<script>
var ele = document.getElementsByClassName("link1");
ele[0].style.backgroundColor = "red";
<script>
change the class name for each page: link2 on page 2; link3 on page 3, etc.
I ended up using jQuery and JavaScript as below:
(function ($, window, Drupal) {
$(window).ready(function () {
// Get the current page url.
var pathname = window.location.pathname;
if (pathname == "/path1") {
$('.link1').addClass("active-page");
}
if (pathname == "/path2") {
$('.link2').addClass("active-page");
}
if (pathname == "/path3") {
$('.link3').addClass("active-page");
}
if (pathname == "/path4" || pathname == "/") {
$('.link4').addClass("active-page");
}
});
})(jQuery, window, Drupal);
The above method is working as expected at least for me!
I still needs an advise if this could affect the site performance in a way or another ?
Home page of my web has 2 url:
https://test/demo1/ or https://test/demo1/home
In home page i link to other page:
<a href="carts" >Link 1</a>
If i run home page is : https://test/demo1/ link open is https://test/carts
If i run home page is : https://test/demo1/home link open is https://test/demo1/carts
How can set relative href of tag a, to always open link https://test/demo1/carts?
You can just call a function to add the attr or using jQuery to update the href
function cartBtn(){
var currURL = window.location.href;
var link = document.getElementById("cartLink"); //test/demo1/home// you a to cart
if(currURL.indexOf("home") < 0){
window.location = currURL+"/home/cart" ;
}else {
window.location = currURL+"/home";
}
}
<a id="cartLink" href="#" onclick="cartBtn()"> click me </a>
An easy way to fix this would be to have the URL you don't want redirect to your normal URL. Add the following, changing what you want where I have pointed:
<meta http-equiv="refresh" content="3; url="file.html" />
^^^^^^^^^
This is a commonly used element, I personally use this a lot in my website.
Just ask if any bit is unclear. But before you do, look here:
http-equiv: This essentially says that this element redirects the page.
content: The number of seconds until the redirect (3) and the page to redirect to (file.html)
I'm working on a one single page navigation system; Is there is a way to change the <title> of a page when a div is :target (#divname in url)?
EDIT: Yeah, sorry, a Jquery/javascript solution works as well.
If the url contains #somePage, use #somePage as a selector and retrieve it's data-title value.
Then set <title></title> as that value. location.hash produces #somePage
$('a').click(function(event){
event.preventDefault();
if(location.hash) {
var newPageTitle = $(location.hash).data('title');
$('title').text(newPageTitle);
}
});
Add a data attribute to your div and set it's value to what the page title should be when that link is clicked.
Some Page
<div id="somePage" data-title="This Is The Page Title"></div>
It can be done in following way:
Assume that you have this html element:
<a onclick="onClick1()" href="#test">
link
</a>
and you have this scripts:
<script>
function onClick1(){
setTimeout(onClick,100);
}
function onClick(){
alert(1);
if(document.URL.indexOf("#test")>=0){
document.title = "Your title";
}
}
</script>
then you'll get on click what you need.
Here is example.
I have been using a bootstrap one page theme in my ASP MVC 5 app. Since it is one page, all the navigation links points to anchors inside the page. Then I needed an additional link to direct to another page, but it does not work. When I see the source code, the href is just fine, the hover is also fine, but when clicked it does nothing. Please help me spot the problem.
the problem is here:
<li class="active">Cart (2)</li>
here is the html code:
<nav class="fixed-top" id="navigation" style="top: 0px; opacity: 1;">
<div class="container">
<div class="row-fluid">
<div class="span12 center">
<!-- LOGO -->
<a class="brand pull-left" href="./">
<img src="/assets/images/logo.png" alt="Treble">
</a>
<!-- END LOGO -->
<!-- MOBILE MENU BUTTON -->
<div class="mobile-menu" data-toggle="collapse" data-target=".nav- collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<!-- END MOBILE MENU BUTTON -->
<!-- MAIN MENU -->
<ul id="main-menu" class="nav-collapse collapse">
<li class="">Home</li>
<li class="">Product</li>
<li class="">About Us</li>
<li>News</li>
<li class="">Contact</li>
<li class="active">Cart (2)</li>
</ul>
<!-- END MAIN MENU -->
<!-- SOCIAL ICONS -->
<div class="social-icons pull-right" id="navRight">
info#panairsan.com
+62 (21) 580 7881
</div>
<!-- END SOCIAL ICONS -->
</div>
</div>
</div>
</nav>
Here is the related css classes:
.fixed-top {
position: fixed;
top: 0px;
opacity: 0;
filter: alpha(opacity=0);
}
#navigation #main-menu {
float: right;
}
#navigation .social-icons {
display: none;
}
I think that is all about the code, nothing else seems to be effecting the link. Please let me know if you need more code to solve this weird problem.
I tried this one also:
<a href="./ShoppingCart">
Adding a dot, like the logo that is able to go to home page (refresh the page), but still does not work.
Thanks
Update
I use jquery.scrollTo. Maybe there is something with this plugin?
The theme I use is this one:
Wrapbootsrap - Treble One Page Theme
UPDATE about jquery.scrollTo
I keep searching, and I am narrowing the problem to jquery.scrollTo. It seems that the plugin is preventing the page from going anywhere. Anywone here is experienced with jquery.scrollTo?
UPDATE Routing Mechanism:
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional },
namespaces: new string[] { "percobaan2.Controllers" }
);
IMPORTANT UPDATE
the main problem: the link is active but it does not direct to the linked page. It does not even direct to a 404 page or anything. It just does not execute the href location.
In the href link call the class "external" like this:
<a href="./ShoppingCart"class="external">
i experienced the same some of the element may overlap your link, just increase the z-index of the link separately
I just solved this issue in my project.
The file plugin.js was causing the trouble, in my case, because the template itself was a one-page template.
I commented-out the line:
self.$nav.on('click.onePageNav', $.proxy(self.handleClick, self));
And the links in the nav just work fine.
I had a similar issue with the template. The application.js file has a script that makes this happen. So you should be able to just remove the
scroll class from the a tag to allow redirect.
/* use class="scroll" on the a element to activate*/
$(".scroll").click(function (event) {
event.preventDefault();
//calculate destination place
var dest = 0;
if ($(this.hash).offset().top > $(document).height() - $(window).height()) {
dest = $(document).height() - $(window).height();
} else {
dest = $(this.hash).offset().top - 50;
}
//go to destination
$('html,body').animate({
scrollTop: dest
}, 1500, 'swing');
/* Fix jumping of navigation. */
setTimeout(function() {
$(window).trigger('scroll');
}, 900);
return false;
});
here is the solution on this page:
a href is not going to other pages
open up your console and then click the inspection tools and then click on the link to open what script runs when you click on that link. you have to state an if statement to say: if (".navbar a" =! ".external"){here goes the rest of li that have external links and now it works}
and then add the external links to the li tags that have external links.
if (".navbar a" =! ".external"){
$(".navbar a, footer a[href='#myPage']").on('click', function(event) {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 900, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
});
}
The bug is in the smooth scroll function event.preventDefault();
the best and most simple way to do it would be to add a .not('.ext_link')
to the smooth scroll function witch will look something like:
$(".navbar a, footer a[href='#myPage']").not('.ext_link').on('click', function(event) {
and the add to all the external links a class="ext_link"
Hope that works for you...
I'm new to Angular but I'm trying to implement a textbox that allows users to enter in links. I only want to support links, and otherwise I want to block all html from being presented as such. I could theoretically use something other than a textarea, but my requirements are that it must be bound to a variable in my scope (right now with ng-model) and I cannot accept html tags other than '< a >'
Here is my example plnkr
In the example, I would like the second seeded item to display as a link, blue and underlined. However, the third item should display as it is currently shown (without interpreting it as html).
HTML:
<textarea maxlength="160" ng-model="val.text"></textarea>
<div class="btn" ng-click="submit()">Submit</div>
<br><br>
<div ng-repeat="item in items">
{{display(item)}}
</div>
JS:
$scope.submit = function() {
if (!$scope.val.text) return
$scope.items.push($scope.val.text);
}
$scope.display = function(txt) {
return txt;
// something here? if txt contains <a> and </a> indicate
// that we should display as html
}