i am implementing the bsn autosuggest
can any one tellme how can i add an div in the result the result will be formed like this
<div style="left: 347px; top: 1024px; width: 400px;" class="autosuggest" id="as_testinput_xml">
<div class="as_header">
<div class="as_corner"></div>
<div class="as_bar"></div>
</div>
<ul id="as_ul">
<li>
<a name="1" href="#">
<span class="tl"> </span>
<span class="tr"> </span>
<span><em>W</em>aldron, Ashley<br><small>Leicestershire</small></span>
</a>
</li>
<li>
<a name="2" href="#">
<span class="tl"> </span>
<span class="tr"> </span>
<span><em>W</em>heeler, Bysshe<br><small>Lincolnshire</small></span>
</a>
</li>
</ul>
<div class="as_footer">
<div class="as_corner"></div>
<div class="as_bar"></div>
</div>
</div>
i need to add an diva above the ul as the Category like
<div>Category</div>
i tried
var tmp = _bsn.DOM.createElement("div", {className:"tmp"});
and i need to know how to add values to the div using java script .....
This autocomplete system hasn't been updated since 2007. I think it'd be wise for you to try something that's more up to date. Do you use jQuery? This is what I'd recommend: http://docs.jquery.com/Plugins/autocomplete, it handles all the work for you.
An advantage with using jQuery is that you can utilize Google's CDN: http://css-tricks.com/google-cdn-naming/
There's a very high chance your visitor won't have to download jQuery cause it's already been used on another site.
Related
I have create a button via Javascript.
JS Code:
var print_via_pos_button = this.add_action_button({
label: _t('Print via POS'),
name: 'pos_print',
click: function(){
//functionalities
}
});
HTML Code:
NOTE: The is dynamically created and i dont have access to change it.
<div class="pos-actionbar">
<ul class="pos-actionbar-button-list">
<li class="button ">
<div class="icon">
<img src="/point_of_sale/static/src/img/icons/png48/printer.png">
<div class="iconlabel">Print</div>
</div>
</li><li class="button ">
<div class="icon">
<img src="/point_of_sale/static/src/img/icons/png48/go-next.png">
<div class="iconlabel">Next Order</div>
</div>
</li><li class="button ">
<div class="label">
Print via POS
</div>
</li></ul>
</div>
Output:
The 3rd button in the row is Custom and i want to auto-tiggert it on screen initialize, but the problem is and the 3 buttons has the same classes, i think to add a id but name tag didnt add anything inline, so how can i trigger the button. Any solution?
Thanks in Advance
<div class="scrolling-items-wrapper">
<div class="menu" style="max-height: 105px;">
<div class="scrolling" style="width: 196px; max-height: 105px;">
<div class="scrolling-content">
<ul >
<li data-menuid="ABC_1">
<a style="white-space:nowrap;" href="#">
<span class="checkbox-container" href="#">
<span class="checkbox" visibility="hidden"></span>
</span>
<span>ABC_1</span>
</a>
</li>
<li data-menuid="ABC_2">
<a style="white-space:nowrap;" href="#">
<span class="checkbox-container" href="#">
<span class="checkbox" visibility="hidden"></span>
</span>
<span>ABC_2</span>
</a>
</li>
<li data-menuid="ABC_3">
<a style="white-space:nowrap;" href="#">
<span class="checkbox-container" href="#">
<span class="checkbox" visibility="hidden"></span>
</span>
<span>ABC_3</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
Manual click :
Whenever that element is clicked manually it generates a dynamic ID.
Using jQuery :
I want to click a particular element suppose ABC_1 using jQuery.
When it is clicked it should generate the Dynamic ID.
Did you try this?
$( "li[data-menuid='ABC_1']" ).click()
If it doesn't work here is a list of all jquery selectors: https://api.jquery.com/category/selectors/
If you have al element with ID ABC_123, you can do this:
$(document).ready(function() {
$("#ABC_123").click(function () {
var newId = "ABC_"+new Date().getTime();
this.id= newId;
});
});
This will change the id of the element by adding the date in miliseconds. Then, do what you want with the new ID.
I'am using jQuery theme switcher (with local storage). I have got 4 buttons. Onclick of each button, the respective theme loads.
But I have a problem here. Each time page loads, the default theme loads first and switches to the theme stored in local storage. How do I load the alternate stylesheet fast without default theme being shown?
"<link id="styleswitch" href="#" rel="stylesheet" /> "
<ul class="nav collapse" style="">
<li>
<a href="javascript:void(0);" data-toggle="load-css" data-uri="../../Styles/theme1.css" class="no-submenu">
<div class="label pull-right" style="background-color:#2980b9"><i class="fa fa-paint-brush"></i></div>
<span class="item-text"> Dodger Blue</span>
</a>
</li>
<li>
<a href="javascript:void(0);" data-toggle="load-css" data-uri="../../Styles/theme2.css" class="no-submenu">
<div class="label pull-right" style="background-color:#85668B"><i class="fa fa-paint-brush"></i></div>
<span class="item-text"> Medium Purple</span>
</a>
</li>
<li>
<a href="javascript:void(0);" data-toggle="load-css" data-uri="../../Styles/theme3.css" class="no-submenu">
<div class="label pull-right" style="background-color:#7EA53C"><i class="fa fa-paint-brush"></i></div>
<span class="item-text"> Olive Green</span>
</a>
</li>
<li>
<a href="javascript:void(0);" data-toggle="load-css" data-uri="../../Styles/theme4.css" class="no-submenu">
<div class="label pull-right" style="background-color:#6D90C5"><i class="fa fa-paint-brush"></i></div>
<span class="item-text"> Cornflower Blue</span>
</a>
</li>
<li>
<a href="javascript:void(0);" data-toggle="load-css" data-uri="../../Styles/theme5.css" class="no-submenu">
<div class="label pull-right" style="background-color:#1E5237"><i class="fa fa-paint-brush"></i></div>
<span class="item-text"> Default theme</span> <!--this is the default theme -->
</a>
</li>
</ul>
This is a common 'flickering' issue, you also see with frameworks like AngularJS.
The solution is rather simple. You can hide the contents, until the initialization is done.
CSS
body {
display: none;
}
body.initialized {
display: block;
}
JS
// Initialization like loading the stylesheet, then
document.body.classList.add('initialized');
Hello You can add style sheet using Append or prepend methord of jQuery and you can add this using Delay() of JQuery so that, you can add this according to your timeline requirement
$(document).ready(function(){
setTimeout(function(){
$("head").append("<link href='css/sarbasishstyle.css' rel='stylesheet' type='text/css'/>");
}, 3000);
});
<html>
<head>
<title> Header is here </title>
</head>
<body>
Hello
</body>
</html>
Hope this may help you, Because i have tried it and its working
You can remove css like that which is not required. You can do it by using ID attribute. Give Id to each stylesheet and check if it is exist in the html or not then remove which are not require and add the which is essential .
Thanks . if you have any doubt then let me know
sorry i've tried asking this before and got no good results, so here's trying again.
I have tried many things and still haven't had any good results.
The code is here -> PasteBin
I want to add a hyperlink to the data-images for the ninja slider. I've never encountered data-image before but i can't use img src="#" cause that doesn't work with the javascript if you guys need any more information, let me know. This is driving me insane!
<div id='ninja-slider'>
<ul>
<li>
<div data-image="images/md/1.jpg"> </div>
</li>
<li>
<div data-image="images/md/2.jpg"> </div>
</li>
<li>
<div data-image="images/md/3.jpg"></div>
</li>
<li>
<div data-image="images/md/4.jpg"></div>
</li>
</ul>
</div>
this is the troublesome part.
Simply enclose your <div>s within an <a> tag. That way the <div>s are technically links.
<div id='ninja-slider'>
<ul>
<li>
<a href="images/md/1.jpg">
<div data-image="images/md/1.jpg"></div>
</a>
</li>
<li>
<a href="images/md/2.jpg">
<div data-image="images/md/2.jpg"></div>
</a>
</li>
<li>
<a href="images/md/3.jpg">
<div data-image="images/md/3.jpg"></div>
</a>
</li>
<li>
<a href="images/md/4.jpg">
<div data-image="images/md/4.jpg"></div>
</a>
</li>
</ul>
</div>
you can use java script to add link
Example:
<div onclick="javascript:location.href='http://www.google.com/'" data-image="images/md/1.jpg"> </div>
Also you can use css to change the pointer
#ninja-slider ul li div{
cursor:pointer;
}
Thanks..
Try using:
<div onclick="location.href='http://www.example.com';" />
Or use span or a tags instead
<style type="text/css">
.myspan {
display: block;
}
</style>
<span class="myspan">text</span>
I know it is ugly, but I need to find out how to get the attribute of <a> tag, of each <li> that has a <span> with class jqx-checkbox-check-checked, if the <li> contains another set of <ul><li>. Only direct <span> will be check for the desired class(jqx-checkbox-check-checked)
This is the code sample:
<li>
<span></span>
<div>
<div>
<div class="jqx-checkbox-default jqx-rc-all">
<span class="jqx-checkbox-check-checked"></span>
</div>
</div>
</div>
<span class="jqx-rc-all jqxtree item">
<b style="color:black"> item1</b>
</span>
<ul class="jqx-tree-dropdown" >
<li >
<span class="jqx-tree-item-arrow-collapse jqx-disableselect"></span>
<div class="chkbox jqx-checkbox">
<div>
<div class="jqx-checkbox-default jqx-rc-all">
<span class="jqx-checkbox-check-checked"></span>
</div>
</div>
</div>
<span class="jqx-rc-all jqx-tree-item">
item2
</span>
</li>
<li >
<span class="jqx-tree-item-arrow-collapse jqx-disableselect"></span>
<div class=""><div>
<div class="jqx-checkbox-default jqx-rc-all" >
<span class="jqx-checkbox-check-checked"></span>
</div></div></div>
<span class="jqx-rc-all jqx-tree-item">
<b style="color:black"> item3</b>
</span>
</li>
</ul>
</li>
</ul>
</li>
I know it is not simple! but if someone can show me the right jquery approach, I will be more then grateful
I dont fully understand your question - but I think you need to have a read of the following jQuery methods :
closest()
next()
find()
Using a combination of those you might be able to get a handle on the object you need
Done it :
$('.jqx-checkbox-check-checked').each(function(){
alert($(this).parent().parent().parent().next().find('a')
.attr('href'));
});
Working example : http://jsfiddle.net/manseuk/CEYXc/
Your HTML is all over the place ...