http://jsfiddle.net/um7m89hp/10/
<div class="piGal pull-right">
Some image or <br />
images will go <br />
over here.
</div>
<div class="panel-group pull-left" id="products">
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-parent="#products" href="#partnumber1">
<h4 class="panel-title">
<div>
<input type="radio" name="specs">
Some Product Title #1<br />
Some Product Subtitle
</div>
</h4>
</div>
<div id="partnumber1" class="panel-collapse collapse">
<div class="list-group">
<ul class="list-group">
<li class="list-group-item">Some product data</li>
<li class="list-group-item">Some product data</li>
</ul>
</div>
</div>
<div class="panel-heading" data-toggle="collapse" data-parent="#products" href="#partnumber2">
<h4 class="panel-title">
<div>
<input type="radio" name="specs">
Some Product Title #2 <br />
Some Product Subtitle
</div>
</h4>
</div>
<div id="partnumber2" class="panel-collapse collapse">
<div class="list-group">
<ul class="list-group">
<li class="list-group-item">Some product data</li>
<li class="list-group-item">Some product data</li>
</ul>
</div>
</div>
</div>
</div>
The radio button checks only when the text in the panel is clicked. If you click directly on the radio button itself or in the border space it will activate the panel but not check the radio button. Any help on this issue? I'm trying to keep the formatting with the radio button out to the side of the panel text.
Yes, strange behaviour. Something with the BS css on the accordion is my guess. All you need to do is change the trigger for the checking of the radio. I have it on the shown event of the collapse.
$(".panel-collapse").on("shown.bs.collapse", function(event) {
//travel up the DOM to the heading and check the radio
$(this).prev('.panel-heading').find('input').prop("checked", true);
});
here is the fiddle: http://jsfiddle.net/um7m89hp/16/
Related
i have this code and i wanted him to not show anything unless clicking on the div.By default it shows everything listed but i need it to just show things filtered by click. Any ideas?
<section class="our_services_tow">
<div class="container">
<div class="architecture_area services_pages">
<div class="portfolio_filter portfolio_filter_2">
<ul>
<li data-filter=".enc"><i class="fa fa-archive" aria-hidden="true"></i>ENCOMENDAS</li>
<li data-filter=".format"><i class="fa fa-file" aria-hidden="true"></i>FORMATOS FICHEIRO</li>
<li data-filter=".prazos"><i class="fa fa-calendar" aria-hidden="true"></i>PRAZOS</li>
<li data-filter=".entreg"><i class="fa fa-truck" aria-hidden="true"></i>ENTREGAS</li>
<li data-filter=".pag"><i class="fa fa-credit-card" aria-hidden="true"></i>PAGAMENTOS</li>
</ul>
</div>
<div class="portfolio_item portfolio_2">
<div class="grid-sizer-2"></div>
<div class="single_facilities col-sm-7 enc">
<div class="who_we_area">
<div class="subtittle">
<h2>blablabla</h2>
</div>
<p>blablabla</p>
<p>blablabla</p>
</div>
</div>
<div class="single_facilities col-sm-7 format">
<div class="who_we_area">
<div class="subtittle">
<h2>Preferência de formatos de ficheiro.</h2>
</div>
<p>blablabla</p>
<p>blablabla</p>
</div>
</div>
make the div hidden using css so it would load up hidden, make another div to have onclick() event(why div? you can use a button) to call a JavaScript function and display the div that is hidden using that function
My collapsible div looks like this and it collapse/expand on clicking btnCollapse.
As soon as I change the selection in dropdown, the collapsible div stop expanding. What am I doing wrong ? Any hints please ?
<div class="panel-heading" style="padding-bottom:20px;">
<h4 class="panel-title">
<a data-toggle="collapse" id="btnCollapse" href="#collapse1" style="float:right;">Hide Filter</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="col-sm-6">
#Html.DropDownListFor(m=>m.SelectedCat,new SelectList(Model.Cat, "Id", "Name"),"Select ..",new { #class= "form-control" })
</div>
</div>
I have the code below that should display the chat window when I click on the user name in <li>
Code <ul> which contains the User list and received the click
<ul class="chat-contacts">
<li class="online" data-user-id="USERCODE">
<a href="#">
<div class="media">
<div class="media-body">
<div class="contact-name">USERNAME</div>
</div>
</div>
</a>
</li>
</ul>
This is the chat window code. If I put a static content of the <ul> window appears, however when I feed the the <ul> with content dynamic the click does not work. Can someone help me??
<script id="chat-window-template" type="text/x-handlebars-template">
<div class="panel panel-default">
<div class="panel-heading" data-toggle="chat-collapse" data-target="#chat-bill">
<i class="fa fa-times"></i>
<a href="#">
<span class="pull-left">
<img src="{{ user_image }}" width="40">
</span>
<span class="contact-name">{{user}}</span>
</a>
</div>
<div class="panel-body" id="chat-bill">
</div>
<form id="messageForm">
<input id="nameInput" type="hidden" class="input-medium" value="Macbook" />
<input id="messageInput" type="text" class="form-control" placeholder="Digite uma mensagem" />
</form>
</div>
</script>
Your click event is not working. The event doesn't know the element exists.
This can happen when using jQuery('.chat-contacts li').click(function(){// do something})
I would try setting the click event with this:
jQuery(document).on('click', '.chat-contacts li', function(){
});
Setting the event with on will force jQuery to scan for new elements in the list.
I have implemented a grid system in HTML and bootstrap. These grid contains of panels and they carry various information.I have made these panel movable(drag, drop) using jQuery and some custom java-script and bootstrap.
I need to store the position where each and every item after exiting the session(log out)
Here is my code
<div class="container sortable">
<div class="row"><!-- BEGIN ROW -->
<div class="col-md-4 placeholder-wrapper">
<div class="panel panel-default" id="portlet-linear-color">
<div class="panel-heading">
<div class="panel-title">
Portlet 1
</div>
<div class="panel-controls">
<ul>
<li>
<a class=
"portlet-collapse portlet-icon portlet-icon-collapse"
data-toggle="collapse" href="#" style=
"font-style: italic"></a>
</li>
<li>
<a class=
"portlet-refresh portlet-icon portlet-icon-refresh"
data-toggle="refresh" href="#" style=
"font-style: italic"></a>
</li>
<li>
<a class=
"portlet-close portlet-icon portlet-icon-close"
data-toggle="close" href="#" style=
"font-style: italic"></a>
</li>
</ul>
</div>
</div>
<div class="panel-body">
<h3><span class="semi-bold">Linear</span> Progress</h3>
<p>Click on the refresh icon to simulate an AJAX call and to see an
animated progress bar indicator above the portlet. These progress
bars come in seven different colors that are available in the Pages
contextual color scheme.</p>
</div>
</div>
</div>
<div class="col-md-4 placeholder-wrapper">
<div class="panel panel-default" id="portlet-linear-color">
<div class="panel-heading">
<div class="panel-title">
Portlet 2
</div>
<div class="panel-controls">
<ul>
<li>
<a class=
"portlet-collapse portlet-icon portlet-icon-collapse"
data-toggle="collapse" href="#" style=
"font-style: italic"></a>
</li>
<li>
<a class=
"portlet-refresh portlet-icon portlet-icon-refresh"
data-toggle="refresh" href="#" style=
"font-style: italic"></a>
</li>
<li>
<a class=
"portlet-close portlet-icon portlet-icon-close"
data-toggle="close" href="#" style=
"font-style: italic"></a>
</li>
</ul>
</div>
</div>
<div class="panel-body">
<h3><span class="semi-bold">Linear</span> Progress</h3>
<p>Click on the refresh icon to simulate an AJAX call and to see an
animated progress bar indicator above the portlet. These progress
bars come in seven different colors that are available in the Pages
contextual color scheme.</p>
</div>
</div>
</div>
<div class="col-md-4 placeholder-wrapper">
<div class="panel panel-default" id="portlet-linear-color">
<div class="panel-heading">
<div class="panel-title">
Portlet 3
</div>
<div class="panel-controls">
<ul>
<li>
<a class=
"portlet-collapse portlet-icon portlet-icon-collapse"
data-toggle="collapse" href="#" style=
"font-style: italic"></a>
</li>
<li>
<a class=
"portlet-refresh portlet-icon portlet-icon-refresh"
data-toggle="refresh" href="#" style=
"font-style: italic"></a>
</li>
<li>
<a class=
"portlet-close portlet-icon portlet-icon-close"
data-toggle="close" href="#" style=
"font-style: italic"></a>
</li>
</ul>
</div>
</div>
<div class="panel-body">
<h3><span class="semi-bold">Linear</span> Progress</h3>
<p>Click on the refresh icon to simulate an AJAX call and to see an
animated progress bar indicator above the portlet. These progress
bars come in seven different colors that are available in the Pages
contextual color scheme.</p>
</div>
</div>
</div>
</div><!-- END ROW -->
<div class="row"><!-- BEGIN ROW 1 -->
<div class="col-md-4 placeholder-wrapper"><!-- BEGIN WRAPPER -->
<div class="panel panel-default" id="portlet-linear-color"><!-- BEGIN PANEL -->
<div class="panel-heading"><!-- BEGIN HEADER -->
<div class="panel-title">
Portlet 4
</div>
<div class="panel-controls"><!-- BEGIN ICONS -->
<ul>
<li>
<a class=
"portlet-collapse portlet-icon portlet-icon-collapse"
data-toggle="collapse" href="#" style=
"font-style: italic"></a>
</li>
<li>
<a class=
"portlet-refresh portlet-icon portlet-icon-refresh"
data-toggle="refresh" href="#" style=
"font-style: italic"></a>
</li>
<li>
<a class=
"portlet-close portlet-icon portlet-icon-close"
data-toggle="close" href="#" style=
"font-style: italic"></a>
</li>
</ul>
</div><!-- END ICONS -->
</div><!-- END HEADER -->
<div class="panel-body"><!-- BEGIN PANEL CONTENT -->
<h3><span class="semi-bold">Linear</span> Progress</h3>
<p>Click on the refresh icon to simulate an AJAX call and to see an
animated progress bar indicator above the portlet. These progress
bars come in seven different colors that are available in the Pages
contextual color scheme.</p>
</div><!-- END PANEL CONTENT -->
</div><!-- END PANEL -->
</div><!-- END WRAPPER -->
</div><!-- END ROW 2 -->
</div>
Is there anyway I can save these instances in a database ?
If you want to get the current html of a page use JQuery.
This will work.
<script>
var contentData = $('#divwithhtml').html();
//If you want to post it
$.post( "yoururl.php", { content: "contentData " })
.done(function( data ) {
alert( "Data Loaded: " + data + " posted html succesfull");
});
</script>
I think you can save base layout in database . then each client reposition each site item then you should save position in database by ajax for clientId .
Edited Post:
It's very simple you can echo string code like this :
select `columnName` from `database` where `clientId`=20
when fetch this return query and save to $row you can try this :
echo $row["columnName"];
OR
$ret="<!DOCTYPE html>
<html>
<head>
<title>site name</title>
</head>
<body>
{$row["columnName"]}
</body>
</html>";
echo $ret;
on button click load <div class="popup">...<div> popup window. button have some value.. ex:(1658) popup details load from sql database on button value.. i cant do this.. plz help me..
Here is my codes on index.php
<ul id="products">
<li>
<div class="image"><img src="../someimage.jpg"><div>
<div class="name">Samsung 65' Curved LED 4K TV</div>
<div class="cart"><button type="button" onclick="" class="button blue">Add to Cart</button><div>
</li>
<li>
<div class="image"><img src="../someimage.jpg"><div>
<div class="name">Samsung Curved LED 4K TV</div>
<div class="cart"><button type="button" onclick="" class="button blue">Add to Cart</button><div>
</li>
</ul>
<div class="popup">
<div class="popup-image"><img src=""></div>
<div class="popup-name"></div>
<div class="popup-cart">
Close
View Cart
Buy Now
</div>
</div>