OK, perhaps the title doesnt best explain what im trying to achive but if I can explain better hopefully someone can help me out:
Im using the following code to select the text held within <a> and add it as the class of that element:
$(".nav a").each(function () {
var self = $(this);
self.addClass(self.text());
});
So for instance:
<a class="nav" href="page1.html">Google</a>
<a class="nav" href="page2.html">Yahoo</a>
<a class="nav" href="page3.html">Bing</a>
Becomes:
<a class="nav Google" href="page1.html">Google</a>
<a class="nav Yahoo" href="page2.html">Yahoo</a>
<a class="nav Bing" href="page3.html">Bing</a>
Im using another bit of code to find out which page the user is currently on, either Google, Yahoo or Bing, and I then allocate another class of 'Selected'
e.g If i was on the Google page the <a> class becomes:
<a class="nav Google selected" href="page1.html">Google</a>
I would like to extend this a little further and can probably explain best via an example:
<a class="nav Google selected" href="page1.html">Google</a>
<a class="nav Yahoo" href="page2.html">Yahoo</a>
<a class="nav Bing" href="page3.html">Bing</a>
<div class="container Google">
Lots of content
</div>
So as above, when 'Google' has the class 'selected' add that to <div class="container">, and the same for when the other links are clicked.
So in other words which ever <a> holds 'selected' add the previous class to <div class="container">
I know there are many ways to do this in far less 'hacky' ways but I have no other choice but to do it this way as I cannot edit the source of the page in anyway so it has to be a browser based solution rather than server side.
$('.nav').click(function(){
$(this).addClass($(this).text()); // I believe you already do this.
$('.conatiner').addClass($(this).text());
});
You can add the class to the container like this:
$('.conatiner').addClass($('a.selected').text());
Related
I couldn't find anything on this. I have a simple website done in Jquery, CSS and HTML. I have a list of hundreds of products stored in a local folder. Once a product is clicked, the user should be able to see a picture of the specification on another page. The page/pages have the same HTML structure, just name and pictures are different. What is the best way to go about it? Do I create a new HTML for each product? Or should I use the same Html page to render different names and pictures? If so, how does this page determine what product was clicked? Right now I am using href to direct to different html pages, but I dont think this is the optimal way of doing it. If I use a single page to gernerate different content, how do I pass in whats being clicked?
<ul id="denison-single-pump-menu" class="container collapse">
<div class="row">
<li class="active col-md-3"><a style="font-weight:bold;" href="/products/vickers/single%20vane%20pump/v10_v20_series.html">V10-V20 Serires</a></li>
<li class="col">V10</li>
<li class="col">V20</li>
</div>
<div class="row">
<li class="active col-md-3"><a style="font-weight:bold;" href="/products/vickers/single%20vane%20pump/v_series.html">V Serires</a></li>
<li class="col">20V</li>
<li class="col">25V</li>
<li class="col">35V</li>
<li class="col">45V</li>
</div>
</ul>
hi i will try to solve your problem, you can make modal on the same html page. you can see here how to make modal https://www.w3schools.com/bootstrap/bootstrap_modal.asp. to differentiate you can replace the id of the modal and the data-target, by using looping or retrieving unique data from your data ex: id. hopefully this can solve your problem.
can you help me?
How can I open the first accordion automatically on page load? It does not matter if it's with javascript or css.
Codepen: codepen.io/fainder/pen/AydHJ
I really do not know how to do this. I hope that you understand what is my point here.
Thanks a lot.
Okay it's very easy, you just need to add "open" class to the first <li> tag, and then add style="display:block; to the submenu :
<li class="open">
<div class="link"><i class="fa fa-database"></i>Web Design<i class="fa fa-chevron-down"></i></div>
<ul class="submenu" style="display: block;">
<li>Photoshop</li>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
check this : https://codepen.io/anon/pen/GxwraM
Given your code, the simple constraint, and the fact that you're using jQuery, the simplest solution is to trigger a click on the first match for .link on document load. This should do the trick at the end of your main function:
$(".link:first").click();
It's quick and dirty and should get the job done. You may need to adjust it with a more specific selector if you're using the .link class anywhere else.
I am currently helping to solve a toggle problem but there's no error showing in console and I don't know where to start looking.
There are two tabs which can be toggled between each other. Let's say toggle tabs are pay / method. Default page is showing pay and when method tab is clicked, method tab shows perfectly but when clicking pay again the tab (CSS) worked fine that we can see pay tab is active but contents of pay doesn't show. The contents are still method.
Currently using bootstrap and of course the script included jquery already.
The html code is
<ul class="nav nav-tabs" role="tablist">
<li class="active" role="presentation">
<a data-toggle="tab" role="tab" aria-controls="home" href="#home" aria-expanded="true">Pay</a>
<li class="" role="presentation">
<a data-toggle="tab" role="tab" aria-controls="method" href="#method" aria-expanded="false">method</a>
</ul>
I am not sure what else to show since the scripts is form bootstrap, it'll be HUGE.
P.S. as said, even though the contents don't show but by clicking each other, I can still see the class is set to active and aria-expanded is set to true to whichever tab I clicked. (Also, I am wondering if I couldn't find out what is really causing this since there are no errors and so on, am I able to write a new script and include the script below the bootstrap script? That should override and work right?)
Edit:
I have tried adding jquery and so I can select the current element but somehow it only worked a bit.
I added another class into the html
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active payment-tabs">pay</li>
<li role="presentation" class="payment-tabs">method</li>
</ul>
I have script like this
$("ul.nav.nav-tabs").on('click', $(".payment-tabs.active"), function () {
console.log($(".payment-tabs.active"));
});
I tried console.log lots ways to find the current element or at least the a element but when I console.log I realized when I click method, the console.log does give the element of method but when I click pay the first time what I got from console.log is still the method element even though pay already has active class added. If I click the pay again then I will finally get the pay element. I might have an idea of the reason but I just have no idea how I can solve this.
Can someone please give me a hand please?
Thanks in advance.
Make sure you include the scripts needed to run the code. See the running demo here
Basically, you just need to call 3 main sources.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
The Tab
<div class="container">
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a data-target="#payment" data-toggle="tab">Payment</a></li>
<li><a data-target="#method" data-toggle="tab">Method</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="payment">This is a payment area</div>
<div class="tab-pane" id="method">This is a method.</div>
</div>
</div>
Sorry if this is such a 'newbe' question, been fighting this for a while...
Seeking to fire an <a href> from within a tag.
Found several ways to do it, however.. the entire script is with-in an <ul>, so script to "click" the <a href> occurs on load of index.html, not when the specific tag is called.
Sorry if confusing; here are some snippets of code that may help explain.
<ul id="menu">
<!-- several <li> to other parts of the site, then: -->
<li>
<a href="#!/WORKHISTORY" onclick="ga('send','event','Internal Links','Work History')">
<span class="over"></span>
<span class="txt1">Work History</span>
</a>
</li>
</ul>
Followed by:
an <article> and a <ul>
Within the <ul>, is a tag referencing the "workhistory" tag.
<li id="WORKHISTORY">
<div class="box">
<a id=wrkhst1 href="/gallery/1426894494/1426894576.jpg" rel="prettyPhoto[1426894494]">
<span class="over"></span>
</a>
</div>
</li>
I have tried to use <script>document.getElementById('wrkhst1').click();</script>
Which works, however it fires at the load of index.html, not with the click of the parent <li>, as it reads the main index page and loads it.
I tried the same script this in the and not using the tag, but same result.
You need to add an eventhandler, for the onclick-event, on the li element. There you simulate the click on the <a> tag.
In code it could look like:
document.querySelector('#WORKHISTORY').onclick = function(){
document.querySelector('#wrkhst1').click();
};
BUT there are very few scenarios where this is needed. I'm sure in your case it would be better to make the <a> display: block; and set it to the size of the <li>. So <a> can do for what it was made for, without any need of javascript.
I have used "enscroll" js scroll bar in my page. http://enscrollplugin.com/#demos
<div id="enscroll_name">
<ul>
<li id="p1">product1</li>
<li id="p2">product2</li>
<li id="p3">product3</li>
<li id="p4">product4</li>
<li id="p5">product5</li>
</ul>
</div>
On Page load the product3 need to be in the visible area. I used <a name="p3"></a> for this. But in query how to achieve this? In html we used anchor name tag like <a name="p3"></a>. But in this script how to achieve this?
You can use .scrollTop() jquery function to visible whatever the area that you want inside the div.
Try like this..
$('#yourdiv').scrollTop($("p[name='p2']").height());
Check the sample fiddle