We Keep Coding

Opening the first accordion on page load

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.

Enscroll js scrollbar

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

How to dynamically generate a basic kendoUI widget?

I'm facing an issue with Kendo UI:
When trying to generate a list dynamically (I want it to be a listView), with the onShow method. It doesn't seems to attach any of KendoUI functionnalities nor styling. like if the kendo "Widget generator" has already done its job and don't touch the newly added content.
In my case:
Here is the HTML:
<div data-role="view" id="profile" data-title="Profile" data-layout="overview-layout" data-show="initProfile">
<div id="profileContent"></div>
She/He Might Like:
<div data-role="scrollview" data-page="0">
<div class="login-scrollV" id="page1" data-role="page">
</div><div class="login-scrollV" id="page2" data-role="page">
</div><div class="login-scrollV" id="page3" data-role="page">
</div>
</div>
</div>
and with Mustache JS, I generate this content dynamically and append it to #profileContent
<script id="profileTemplate" type="text/x-handlebars-template">
<ul id="profileList" data-role="listview" data-style="inset" data-id="{{id}}" data-type="group">
<li>Profile
<ul>
<li><h2>{{firstname}} <span>{{lastname}}</span></h2><img src="{{picture}}" /></li>
<li>Gender <span class="sales-up">{{genre}}</span></li>
<li>Notation <span class="sales-up">Not Yet Ready</span></li>
</ul>
</li>
<li>Center Of Interests
<ul>
<li>Rock</li>
<li>Opera</li>
<li>Exhibitions</li>
</ul>
</li>
</ul>
</script>
In the end, the content is generated the way I told Mustache to do it but Kendo doesn't applu any of its functioannlity to this listView nor any style.
I understand why (I assume the html should be there from the beginning), so my question is:
How Can I find a workaround to created a list View Dynamically with the onShow method with Mustache handlebars (ideally) that Kendo UI would recognize and then apply to it the list Views functionalities?
Many Thanks

You probably need to run kendo.bind or kendo.init on the profileContent div, after you populate it.

issue with jquery external linking

I am working on jquery. I have 4 tabs within the <li> tags. I have used jquery 1.9.1.js for my project. my <li> looks like the one below. I got a solution to use http://www.asual.com/jquery/address/docs/#api-reference. But the fact is that I have used and imported this external lib but it doesn't seem to work. The thing which i am trying to attain is when ever I select the specific <li> item and press f5 the page by default loads the first <li> item. But the thing which I am looking for is , it has to load the same selected <li> item and its contents when refreshed. any help would be appreciated.
Here is my HTML code:
<div class="container">
<div class="coolbar">
<div class="cool-inner">
<ul id="mybar" class="nav cool-tabs">
<li class="Coke">
Coke <span class="dashboard-bottom"></span>
</li>
<li class="Fanta">
Fanta<span class="Pricing-bottom"></span>
</li>
<li class="Pepsi">
Pepsi<span class="Promotion-bottom"></span>
</li>
<li class="Limca">
Limca<span class="Product-bottom"></span>
</li>
</ul>
</div>
</div>
</div>.
<div id="login">
<button type="button" id="submit" value="Login" class="btn">Click me for cool drinks</button>
</div>
And my jquery code for page refresh:
$(function() {
$('#submit').click(function() {
$('.container').show();
$('#login').hide();
$.cookie('shown', true);
});
if ($.cookie('shown')) {
$('#submit').click()
}
});
Thanks in advance.

when activating the tab you may want to set the tabs position/value in the cookie and when the page loads, check if tabs position/value exist in the cookie, then accordingly activate that tab or trigger click event on that tab.
may this help

How to have a custom button within a list view in JQuery Mobile?

I want to have a custom button to appear on the right side of my list view header named 'Click Me', which will perform an action via the 'on click' event. As far as I know JQuery does not have a standard way to achieve this but perhaps you know how to achieve this.
As an illustration to what I want to achieve, take a look at http://jquerymobile.com/test/docs/buttons/buttons-icons.html.
Imagine now that you are looking at list headers where the data icon is on the right side and instead of it being an icon it says 'Click Me'. Furthermore, the List Header cannot be clickable like its elements, instead the data icon must be the only clickable element in here.
Please let me know if you have any ideas, even if this is simply impossible to achieve due to JQuery, thanks!

This is what I was looking for:
<ul data-role="listview">
<li data-role="list-divider">
Fruits
<span class="ui-li-count">
<a href="#" data-role="none" data-theme="b">
Button
</a>
</span>
</li>
<li>Apples</li>
<li>Grapes</li>
<li>Others</li>
</ul>
Note that the list divider contains a SPAN which acts as a button... quite ingenious :)
Anyways, thanks for your help!

You are looking for a Split Button list

This is an example you can put two icon buttons inside:
<ul data-role="listview" data-inset="true" style="min-width:210px;">
<li data-role="list-divider">Opciones de platillo</li>
<li><a href="#" >Notas</a></li>
<li>
Tiempo
<div style="float: right;">
Plus
Minus
</div>
</li>
<li>
Comensal
<div style="float: right;">
Plus
Minus
</div>
</li>
<li>Modificadores</li>
<li>Terminadores</li>
<ul>
</div>