Hi i'm having below scenario,
Fetching products from other 3rd party website,
Their product page having 3 different tabs and their default html structure is like this,
<ul>
<li class="active">description</li>
<li>Spec</li>
<li>Gallery</li>
<ul>
<div>
<div class="description">product descriptions goes here .... </div>
<div class="spec"></div>
<div class="gallery"></div>
</div>
Is i click on second tab (spec tab) then the html structure is (contents adding dynamically),
<ul>
<li class="active">description</li>
<li>Spec</li>
<li>Gallery</li>
<ul>
<div>
<div class="description">product descriptions goes here .... </div>
<div class="spec"> Specs goes here </div>
<div class="gallery"></div>
</div>
Because of the contents adding dynamically according to tab selection, i cant able to fetch complete contents. Is there any way to click other too and get all contents ?
Did anyone know how to solve this ?
Not sure what are you asking here. but may be worth a try :
var tabs = document.getElementsByTagName("li");
for (var i = 0, x; x = tabs[i++];)
x.click();
Related
The way that Zendesk's Help Centre works is by printing all the sections onto the page without giving them any unique identifier, so it's a pain if you want to implement any sort of scrollspy (updating a sidenav with where you are on the page), and most importantly anchors so that the sidenav actually works.
I'm not that technical and was wondering if anyone knew of a way to add an ID & class to a series of headers using JS?
I'm thinking for each h2 in section-tree-with-article, adding a unique ID, and a class that matches the h2's text?
Any thoughts?
You need to select all the h2 elements, iterate through them and set a class as well as an id with each iteration.
I've simple set the innerHTML as the class. You can modify it according to your use case.
var headers = document.querySelectorAll("div.section-tree-with-article h2");
headers.forEach(function(header, idx) {
header.className = header.textContent.replace(/\s/g, "-"); //You can modify this accordingly
header.id = "uniqueID" + idx; //And similarily the uniqueID
})
<div class="section-tree-with-article">
<ul>
<li class="section">
<h2>Admin 0</h2>
</li>
</ul>
<ul>
<li class="section">
<h2>Admin 1</h2>
</li>
</ul>
<ul>
<li class="section">
<h2>Admin 2</h2>
</li>
</ul>
<ul>
<li class="section">
<h2>Admin 3 4 5</h2>
</li>
</ul>
<ul>
<li class="section">
<h2>Admin 4</h2>
</li>
</ul>
</div>
Here's the same solution in jquery:
$("div.section-tree-with-article h2").each(function(index, value){
var classToAdd = $(this).text();
$(this).attr('class', classToAdd);
$(this).attr('id', "uniqueID" + index);
})
Although this answer does not address your request for a JavaScript solution, I recommend instead using the Help Center's built-in templating system to iterate on the elements and add classes, directly in the html files. Please note that this is only available in the "Professional" and "Enterprise" Zendesk plans.
This example is probably not the best, since you will end up with spaces or other unusable characters in the value of the h2 elements' class attribute (it will replace {{name}} with the section's name), but I hope it will give you an idea of how this works, and how you might use it to achieve a solution.
<div class="section-tree-with-article">
<ul>
{{#each sections}}
<li class="section">
<h2 class="{{name}}" id="{{id}}">{{name}}</h2>
</li>
{{/each}}
</ul>
</div>
will end up something like this:
<div class="section-tree-with-article">
<ul>
<li class="section">
<h2 class="Admin and Settings" id="12345">Admin and Settings</h2>
</li>
<li class="section">
<h2 class="Getting Started" id="45678">Getting Started</h2>
</li>
...[more sections]...
</ul>
</div>
More info on Help Center templating here:
https://support.zendesk.com/hc/en-us/articles/216367358-Help-Center-templating-cookbook-Professional-and-Enterprise-
Im a newbie and im trying to create a webstie just for practice, I realized that when I want to line break one of the divs (just to make stuf fancy) all my other divs gets linebreaked though, which I dont want. how do you fix this?
<ul class = "nav">
<div class = "head_dividers"><li> Hello <span> World </span> </li> </div>
<div class = "head_dividers"><li> stuff </li></div>
<div class = "head_dividers"><li> Help </li> </div>
</ul>
</div>
You should not have the <li> tags inside of a <div> tag. You can swap them if you like, but generally, <div> is a divider, and the <ul>/<li> items setup their own spacing/breaks (on each new list item).
The <br /> tag, on the other hand, is used inside of your text to create a break at a specific point.
I would recommend something a bit more simple like this:
<ul class="nav">
<li class="head_divider">...</li>
<li class="head_divider">Text<br />Here</li>
<li class="head_divider">...</li>
</ul>
and use CSS to add any necessary styles/spacing.
I have a system that lists an number of items from a database, these items can have three different states that can be attached to it, Manual, Auto and VIP. A single item in this list could be either of this states and sometimes two or all three at the same time.
The system also has three filters, Manual, Auto and VIP.
I am trying to build a system so that when a state has changed on a filter (box is checked/unchecked) the system will hide or show items from this list.
So i am struggling with this concept with my current implementation.
here is some code:
<ul class="content-list" id="update-list">
<li class="list-item"
data-auto="1"
data-manual="1"
data-vip="1">
<div class="list-avatar">
<p class="multi-circle">A/M</p>
</div>
<div class="list-details">
<h3 class="list-item-heading">Update #1 </h3><small class="list-timestamp">11/11/13</small>
<div class="list-item-text">
</div>
</div>
</li>
<li class="list-item"
data-auto="1"
data-manual="1"
data-vip="0">
<div class="list-avatar">
<p class="multi-circle">A/M</p>
</div>
<div class="list-details">
<h3 class="list-item-heading">Update #2 </h3><small class="list-timestamp">11/11/13</small>
<div class="list-item-text">
</div>
</div>
</li>
<li class="list-item"
data-auto="0"
data-manual="1"
data-vip="0">
<div class="list-avatar">
<p class="manual-circle">M</p>
</div>
<div class="list-details">
<h3 class="list-item-heading">Update #3 </h3><small class="list-timestamp">11/11/13</small>
<div class="list-item-text">
</div>
</div>
</li>
I have three "data-" attributes attached to each list item, i wanted to use these to detect if the item show be displayed or not but i can't think of a simple way of doing this.
My other thought on the matter would be to add a class to each item saying if it is Manual, Auto or VIP for example
<li class="list-item manual auto vip">
I understand how to remove and display elements this way however it seems a little messy to me.
So what is the best way of achieving this using Jquery? I think i might be over engineering the whole thing.
Thanks for your time.
I think you might be looking for the attribute selector.
For example, when someone wants to see the "data-auto" items, you could do the following:
$("li[data-auto='1']").show();
Simple question:
How can I keep the selected tab upon page refresh in JQuery Mobile (1.4.2)?
More specifically: I have a results page which is passed through a Django paginator first to split multiple rows of results from my database, however on page selection (?page=1, ?page=2 etc. or even refresh) I lose the user selected tab. How can I fix this?
I am using code very similar to the one found in the docs:
<div data-role="tabs" id="tabs">
<div data-role="navbar">
<ul>
<li>one</li>
<li>two</li>
</ul>
</div>
<div id="one" class="ui-body-d ui-content">
<h1>My results as an ordered list</h1>
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
</div>
<div id="two">
<h1>My results as an unordered list</h1>
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
</div>
</div>
I'm assuming that you can tweak the request url using anchors
As Rob suggested in the comment, you can go for location hashes, to solve your problem:
Set for every tab you want to track a link with a unique hash tag and keep it correlated to the target div id.
one //one
two //two
//corresponds to
<div id="one">...</div>
<div id="two">...</div>
Then read the hashes and take proper actions:
function uri_get() {
return window.location.hash.slice || "#default";
}
$(document).ready(function () {
var $uri;
uri = $(uri_get()); //$uri now contains your tab element.
});
I've been trying to find a method on moving the TOC in MediaWiki to the sidebar or any location really that I want it outside of the main content but with no success.
The simplest looking solution brought up the following but it doesn't seem to actually move the TOC.
<div id="toc_sidebar_holder"> </div>
<script type="text/javascript">
var toc = document.getElementById('toc');
var toc_holder = document.getElementById('toc_sidebar_holder');
if(toc && toc_holder){
toc.parentNode.removeChild(toc);
toc_holder.appendChild(toc);
}
</script>
Then here is what the HTML looks like for the TOC currently.
<table id="toc" class="toc"><tr><td><div id="toctitle"><h2>Contents</h2></div>
<ul>
<li class="toclevel-1 tocsection-1"><span class="tocnumber">1</span> <span class="toctext">Cats</span>
<ul>
<li class="toclevel-2 tocsection-2"><span class="tocnumber">1.1</span> <span class="toctext">Type</span></li>
<li class="toclevel-2 tocsection-3"><span class="tocnumber">1.2</span> <span class="toctext">Meows</span></li>
</ul>
</li>
<li class="toclevel-1 tocsection-4"><span class="tocnumber">2</span> <span class="toctext">Dogs</span>
<ul>
<li class="toclevel-2 tocsection-5"><span class="tocnumber">2.1</span> <span class="toctext">Woof</span></li>
</ul>
</li>
</ul>
</td></tr></table>
Really looking for a solution or figuring out how to get the function above to work.
That script looks fine, but if you you test it, you might notice that toc is not assigned.
Put the script at the bottom of your skin, so it is executed when both elements are already available.