I want remove classes which are created dynamically using jQuery.
I have a dynamic classes in table like:
"dynamicHeader","record1","record2","record3"
I want to remove all classes class name contain 'record'. Thanks Advance.
via Chebli Mohamed
mardi 4 août 2015
How to remove all classes which are created dynamically using jQuery
via Chebli Mohamed
Fix the row and column as header dynamically in html without modifying the code [on hold]
I have a html page which contains a table in it and I have add that page into my asp.net project. Now I want freeze the panes(fix 1st five rows as header and 1st column) without modifying the html page..
In that html page the table did not contain 'thead', 'tbody' and 'th' tags.
It just like this...
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
I don't want to add 'th', 'thead' tags to my html page... because I don't want modify my page... I think we may add them and freeze the panes dynamically.....
via Chebli Mohamed
jQuery Autocomplete - Passing Value Instead of Name
I have an automcomplete working using the method below. I type in and it returns the user name of the individual I am searching for and it also shows me the ID of the user if I want to. However, what I require is for the FIRST and LAST NAME to show in the input box but the actual value (ID) to be passed when the form is submitted. So how to I get the value of the input type to be the ID but show the drop down as first and last name?
HTML
<input type='search' id='nameSearch' placeholder='Search User' />
SCRIPT
<script>
$(document).ready(function(){
$('#nameSearch').autocomplete({
source:'results.php',
minLength:1,
select: function(event, ui){
// just in case you want to see the ID
var accountVal = ui.item.value;
console.log(accountVal);
// now set the label in the textbox
var accountText = ui.item.label;
$('#nameSearch').val(accountText);
return false;
},
focus: function( event, ui ) {
// this is to prevent showing an ID in the textbox instead of name
// when the user tries to select using the up/down arrow of his keyboard
$( "#nameSearch" ).val( ui.item.label );
return false;
},
});
});
</script>
SQL
include "libs/db_connect.php";
// get the search term
$search_term = isset($_REQUEST['term']) ? $_REQUEST['term'] : "";
// write your query to search for data
$query = "SELECT
ID, NAME, LAST_NAME
FROM
b_user
WHERE
NAME LIKE \"%{$search_term}%\" OR
LAST_NAME LIKE \"%{$search_term}%\"
LIMIT 0,10";
$stmt = $con->prepare( $query );
$stmt->execute();
// get the number of records returned
$num = $stmt->rowCount();
if($num>0){
// this array will become JSON later
$data = array();
// loop through the returned data
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){
extract($row);
$data[] = array(
'label' => $NAME . " " . $LAST_NAME,
'value' => $ID
);
}
// convert the array to JSON
echo json_encode($data);
}
//if no records found, display nothing
else{
die();
}
via Chebli Mohamed
Can we have fineuploader traditional and azure together
previously we used to have fineuploader version called custom, which was a jquery wrapper and we had both azure upload to blob + traditional upload to your server
in the new version 5.2 when I call the fineUploader() method to upload to our own server it gives out errors.
via Chebli Mohamed
Get a variable from a PHP script to JQuery in another file. Without echo?
I need some help with how to get a variable from another PHP script to a JQuery in my index.php file.
On my webpage I have the ability to search a database and this is done by the click of a button which performs the search and displays the results in another div on the page.
This part of the webpage work fine.
What I would like to do next is for another button to be able to download a text file with the results of my query. The result is calculated in another PHP file, the same one that displays it.
My JQuery in index.php looks something like:
<script>
$(document).ready(function(){
$("#querySubmitButton").click(function(evt){
evt.preventDefault(); // stops the submit taking place
var myQuery = $('#queryText').val(); // get the query value
$('#container').load('getData.php', { query:myQuery });
});
$("#selectButton").click(function(evt){
evt.preventDefault();
var selectQuery = $( "#selectBox" ).val();
$('#container').load('getData.php', { query:selectQuery });
});
$("#downloadButton").click(function(evt){
alert($result); //Somehow alert the $result variable from my getData.php file, to make sure that I can receive it and perform further things on it so that it is downloaded as a document.
});
});
</script>
As I use the getData.php file for displaying my result in another div, I can't echo $result and use it in JSon?? because that will also be displayed on my webpage, which I of course do not what.
Is this possible somehow?
Thank you for any help. //Ambrose
Here is my code in getData.php if that is of help:
$conn = pg_connect("dbname=xxx user=xxxxxxx password=xxxxxxxx");
if (!$conn) {
die("Error in connection: " . pg_last_error());
}
$query =$_POST['query'];
$result = pg_query($query);
if (!$result) {
echo "Problem with query " . $query . "<br/>";
echo pg_last_error();
exit();
}
else{
if(empty($result)){
echo"Tom";
}
else{
echo "<table class='resultTable'><tr>";
$i=0;
while ($i < pg_num_fields($result))
{
$fieldName = pg_field_name($result, $i);
echo '<td>' . $fieldName . '</td>';
$i = $i + 1;
}
echo '</tr>';
while($row = pg_fetch_assoc($result)) {
echo "<tr>";
foreach ($row as $key => $value){
echo "<td>" . $value . "</td>";
}
echo "</tr>";
}
echo "</table>";
}
}
via Chebli Mohamed
SAP UI5 upload file and oData response
I am developing a SAPUI5 in order to upload files [mainly XML ]. I have implemented the view using XML views within the WebIDE as well as the corresponding JS controller, which is calling an oData service matched with 'create_stream' method then doing the job of reading the file content.
All is working fine but then I cannot receive the response containing the file content [parsed] from the oData back to my js controller.
Here is my ajax call, actually there are two calls but the first one is used to get the necessary security csrf token only.
jQuery.ajax({url : Service1,
type : "GET",
async: false,
beforeSend : function(xhr) {
xhr.setRequestHeader("X-CSRF-Token", "Fetch");
},
success : function(data, textStatus, XMLHttpRequest) {
token = XMLHttpRequest.getResponseHeader("X-CSRF-Token");
}
});
$.ajaxSetup({
cache : false
});
jQuery.ajax({
url : service_url,
async : false,
dataType : "text",
cache : false,
data : filedata,
type : "POST",
beforeSend : function(xhr) {
xhr.setRequestHeader("X-CSRF-Token", token);
xhr.setRequestHeader("Content-Type", "application/text;charset=UTF-8");
},
success : function(odata) {
oDialog.setTitle("File Uploaded");
oDialog.open();
document.location.reload(true);
},
error : function(odata) {
oDialog.setTitle("File NOT Uploaded");
oDialog.open();
document.location.reload(true);
}
});
Can anyone find where I am wrong within this flow ?
I think the problem might be in the ajax call, maybe in the parameters or in the way I am getting the data as response from the oData service ?
Or the issue could be whithin the oData create_stream method ?
via Chebli Mohamed
jquery.tipTip displays tooltip text randomly
I am using jquery.tipTip to display text on image’s mouseover but it randomly activates and displays the text when there is no mouseover on the image.
$('.tooltip').tipTip({maxWidth: 'auto', edgeOffset: 5, defaultPosition: 'top', keepAlive: false, activation: "hover"}); [![enter image description here][1]][1]
via Chebli Mohamed
how can check by console when a specific class is removed from my DOM?
i have a class disabled in my code, but that class is removed from DOM when i refresh the page.
i have no idea how to check that , the js it's so big so i dont wanna touch and broke something.
so what is happen when i check my DOM i see:
class="btn-color rank"
on my html i inserted disabled but always after load the page the disable class is removed.
class="btn-color rank disabled"
the funniest part is : if i insert a div bellow of that one with the class disable, both will be have the class disable.
i wanna know when the class disable is removed from DOM, someone know can i check that by console?
via Chebli Mohamed
Bootstrap tooltip with absolute position
I'm having strange issue when having absolutely positioned element with Bootstrap tooltip.
Tooltip is not rendered correctly according to parent element, please see fiddle: [http://ift.tt/1VZ7ctd]
When parent element is not positioned absolutely everything is working just fine. Any ideas how to resolve this issue?
Note: I can't set CSS with of absolutely positioned element?
via Chebli Mohamed
add active caption class to current caption
I found this fiddle, and modified it a bit (added controls and pager). Now when you click on prev/next or on pager(1,2,3,etc.) I want to add active class to the current caption.
$('.bxslider').bxSlider({
mode: 'fade',
captions: false,
controls: true,
pager: true,
auto: true,
speed: 1000,
onSlideBefore: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
console.log(currentSlideHtmlObject);
$('.active-caption').removeClass('active-caption');
$(currentSlideHtmlObject).prev().addClass('active-caption')
},
onSlideNext: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
console.log(currentSlideHtmlObject);
$('.active-caption').removeClass('active-caption');
$(currentSlideHtmlObject).next().addClass('active-caption')
},
onSliderLoad: function () {
$('#bxsliderCaption>ul>li').eq(0).addClass('active-caption')
},
// http://ift.tt/1dFlt6b
});
via Chebli Mohamed
jQuery DataTables - Responsive Table with ScrollY is not working
I am using DataTables plugin with Responsive Table and fixed yScroll and disabling xScroll.
But I am still getting the Horizontal Scrollbar, though I am adding the code like below...
scrollY: 200,
scrollX: false,
Anyhow, I am using Responsive table, why I want to show the Horizontal Scrollbar?
Please refer the code, online example and screenshot below...
Online Demo
CSS
th,td{white-space:nowrap;}
If I remove above css it is working as expected. But I dont want to wrap down the td / th text. This is where I am facing problem :(
jQuery:
$(document).ready(function() {
var table = $('#example').DataTable( {
dom: 'RCT<"clear">lfrtip',
scrollY: 200,
scrollX: false,
columnDefs: [
{ visible: false, targets: 1 }
],
"tableTools": {
"sRowSelect": "multi",
"aButtons": [
{
"sExtends": "print",
"sButtonText": "Print"
}
]
}
});
});
HTML
<table id="example" class="display responsive" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
.....................
Screenshot Ref:
via Chebli Mohamed
jQuery flot load x-axis from array
I have a jQuery flot graph that loads the x-axis like so:
xaxis: {
tickColor: 'transparent',
tickDecimals: 0,
ticks: ticks
},
If I set the ticks variable like so it works, and the x-axis contains the 7 dates:
var ticks = [[1,"27/07"],[2,"28/07"],[3,"29/07"],[4,"30/07"],[5,"31/07"],[6,"01/08"],[7,"02/08"]];
console.log(ticks);
However if I generate the variable from an array like so:
var ticks = JSON.stringify(myArray);
console.log(ticks);
It doesn't work, the x-axis contains the numbers 1 - 7.
Here is what the console.log shows:
It looks like my JSON.stringify is correct but I'm not sure what to do! Any ideas? Why is the first console.log entry coloured but the second one not? Is the format incorrect?
via Chebli Mohamed
why I am getting NAN in safari browser?
I am trying get difference of two time in safari browser .It is working fine in chrome .But on safari I am getting NAN.when I run application I save today date first time.and on second time I run my application I get the difference of save date and now date .it give correct in chrome .but fail in safari why ? here is my code http://ift.tt/1KNZ7nL
var todaydate = new Date();
var datetime = todaydate.getMonth() + 1 + "-" + todaydate.getDate() + "-" + todaydate.getFullYear() + " " + todaydate.getHours() + ":" + todaydate.getMinutes() + ":" + todaydate.getSeconds();
if (localStorage.getItem("getSinkdate") == null || localStorage.getItem("getSinkdate") == '') {
alert('empty')
localStorage.setItem("getSinkdate", datetime);
} else {
var datetimeLocal = window.localStorage.getItem("getSinkdate")
var d1 = new Date(datetime);
var d2 = new Date(datetimeLocal);
alert((d2.getTime() - d1.getTime()) / (1000 * 3600))
alert((d2.getTime() - d1.getTime()) / (1000 * 3600) > 12)
if ((d2.getTime() - d1.getTime()) /(1000*3600)> 12)
{
alert((d2.getTime() - d1.getTime())/ (1000 * 3600));
localStorage.setItem("getSinkdate", datetime);
}
}
via Chebli Mohamed
onclick passing data to javascript
I have a link that when clicked should assign a rails variable to a JavaScript variable. The JavaScript is then used to calculate the price. I have the price calculated with a hard coded value at the moment.
in the html I need data-price to be var blankPrice in the js. Any help would be great.
function calculatePrice(){
var blankPrice = 5;
console.log(blankPrice)
var pricePerSide = 3;
var printedSides = 0;
if (frontCanvas) {
var frontCanvasJson = JSON.parse(frontCanvas);
if (frontCanvasJson && frontCanvasJson.objects.length > 0)
printedSides++;
}
if (backCanvas) {
var backCanvasJson = JSON.parse(backCanvas);
if (backCanvasJson && backCanvasJson.objects.length > 0)
printedSides++;
}
var total = blankPrice + (pricePerSide * printedSides);
$('.base-price').text('$' + total);
}
function saveCampaign() {
campaign.front_canvas = frontCanvas;
$.post('/campaigns', campaign);
}
<a
tabindex="-1"
data-original-title="<%= shirt_color.color_name.titleize %>"
class="shirt-color-link"
data-color="#<%= shirt_color.hex %>"
data-price="<%= product.base_price %>"
data-product-id="<%= product.id %>">
<table>
<tr>
<td style="border: 1px solid #DDD" bgcolor="#<%= shirt_color.hex %>"></td>
<td style="padding-left: 10px;"><%= shirt_color.color_name.titleize %></td>
</tr>
</table>
</a>
via Chebli Mohamed
kcfinder have upload directory selected through URL
Problem: As found in kcfinder's definition I am using this link to open kcfinder:
window.open('/kcfinder/browse.php?type=files&dir=files/public&subDir=/PO/'+editId, 'kcfinder_textbox',
', width=800, height=600');
In here, I have modified the URL to also include the subdirectory path so that the URL becomes something like this http://ift.tt/1VZ7aBx .
The subDir part has the directory name to be set to (and created if not exists). In the config.php I already have a directory set to be the root. So if the subDir is provided it will create the subDir inside the root of config.php. Now I would want this subDir to be the new root directory for kcfinder.
So for example if my uploadURL in the config is /var/www/html/web/upload/ the new root for the above URL will become /var/www/html/web/upload/PO/200836/.
Attempt: So far I have been able to successfully create the directory /var/www/html/web/upload/PO/200836/ for the above URL (or any URL) provided. However, the root in kcfinder is still set to /var/www/html/web/upload/. So when I open the kcfinder, the directory gets created internally but the root is still set to the original root from config.php.
I added the following lines to change my root directory to the sub directory I pass through URL:
$this->config["uploadURL"] .= $_GET['subDir'];
$this->config["uploadDir"] .= $_GET['subDir'];
$this->typeDir = $this->config["uploadDir"] ."/files";
$this->typeURL = $this->config["uploadURL"] ."/files";
I have also raised this as an issue on github but no response from there yet. I am assuming the only change I need to do is set the root directory to display to the new directory being created but I am not sure where I am supposed to do this.
Is there a workaround for this?
PS: I am also open to any other web file manager PHP/jQuery solutions which has a way to do this. Using symfony as the framework.
via Chebli Mohamed
append server side code from client side jquery
I have a server side code block such as <%Response.Write(...)%> How would i append it dynamically from client side script using jquery?
$("div.items").append('<form action="#" method="POST">');
$(".items form').append('<%Response.Write(...)%>') //???
via Chebli Mohamed
How can I show a foundation.css dropmenu by jQuery
I tried to write a nav bar with foundation.css, but the sub-menu does not show when mouse move on.
The question is, how can I show the sub-menu of test in this webpage.
I tried to change the visibility, display, z-index, left, but nothing happend.
via Chebli Mohamed
How to push only validation error messages into an array using Laravel
I have a validator, it has error messages, and my goal is to get only error messages with the field names.
$validator = Validator::make(
array(
'firstField' => Input::get('firstFieldName');
'secondField' => Input::get('secondFieldName');
),
array(
'firstField' => 'required';
'secondField' => 'required';
)
);
if($validator->fails()){
return $validator->messages();
}
So, this piece of code is returning some values to my js file as following
function getErrorMessages(){
//Some UI functions
var myDiv = document.getElementById('messageDivID');
$.post('validationRoute', function(returedValidatorMessageData)){
for(var a in returedValidatorMessageData){
myDiv.innerHTML = myDiv.value + a;
}
}
}
Problem is, the only values i get from post request is like firstField secondField but i'd like to get like firstField is required message. What would be the easiest way ?
Thanks in advance.
via Chebli Mohamed
Why is this my jQuery keypress() event not working?
I have a text box
<input id="textinput" type="text" name="text_input" value=""/>
and a properly linked (did a console.log in the document ready function and it worked) jquery file
$(document).ready(function()
{
console.log("hi");
});
$( '#textinput' ).keypress(function() {
var tag_text = $('#textinput').val();
console.log("key pressed");
});
As far as I can tell, I'm doing everything properly. However, I am obviously not doing something right.
My goal is to make it so that whenever a letter/character (or any key, really) is pressed with focus on the textinput textbox, an event will trigger.
What am I doing wrong here?
via Chebli Mohamed
jQuery AJAX event only firing once
First let me thank @Jasen, he spent 9 days helping me with an issue and it means a lot to me that he took him time to help me. It was this that he was helping me with, but at the last second they decided they wanted to go with AJAX since the contact page uses it and removing items from the cart utilizes it.
Let me get to my issue, I have view (this is MVC 5) that in loop loads all the products of a selected category. I want to use jQuery nd AJAX to add items to the cart. This works great for the first item in the list the first time it is added to the cart.
I imagine my problem is all the buttons have an id of AddToCart and jQuery, the way I have it written can't decide which button is being clicked.
Here is the code for the view
@model IEnumerable<AccessorizeForLess.ViewModels.DisplayProductsViewModel>
@{
ViewBag.Title = "Products > Necklaces";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<link href="~/Content/Site.css" rel="stylesheet" />
<link href="~/Content/jquery.fancybox.css?v=2.1.5" rel="stylesheet" />
<link href="~/Content/jquery.fancybox-buttons.css?v=1.0.5" rel="stylesheet" />
<link href="~/Content/jquery.fancybox-thumbs.css?v=1.0.7" rel="stylesheet" />
<h2>Products > Necklaces</h2>
<div id="update-message"></div>
<p class="button">
@Html.ActionLink("Create New", "Create")
</p>
@*@using (Html.BeginForm("AddToCart", "Orders", FormMethod.Post))*@
{
<div id="container">
<div id="sending" style="display:none;"><img src="~/Content/ajax-loader.gif" /></div>
<div style="color:red" id="ItemAdded"></div>
<div class="scroll">
@foreach (var item in Model)
{
<div class="scroll2">
<div class="itemcontainer">
<table>
<tr>
<td id="@item.Id" class="divId">
<div class="DetailsLink" id="@item.Id"> @Html.ActionLink(@item.Name, "Details", new { id = item.Id })</div>
<br />
<div id="@item.Id"></div>
<div class="divPrice" id="@item.Price">@Html.DisplayFor(modelItem => item.Price)</div>
<div class="divImg"><a class="fancybox-thumbs" href="@item.Image.ImagePath" title="@item.Image.AltText" data-fancybox-group="thumb"><img src="@item.Image.ImagePath" alt="@item.Image.AltText" title="@item.Image.AltText" /></a></div>
<div> </div>
<div class="divQuantity"> Quantity: @Html.TextBoxFor(modelItem => item.Quantity, new { @id = "quantity", @style = "width:50px;", @class = "formTextBox" })</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="button" value="AddToCart" class="btn btn-default" id="AddToCart" />
</div>
</div>
<div style="height:15px;"></div>
</td>
</tr>
</table>
</div>
</div>
}
<div class="button">@Html.ActionLink("Back To Categories","Categories")</div>
<br />
</div>
</div>
@*}*@
And here is my jQuery code:
@section scripts {
<script src="~/Scripts/jQuery-jScroll.js"></script>
<script src="~/Scripts/jquery.fancybox.js?v=2.1.5"></script>
<script src="~/Scripts/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script src="~/Scripts/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript">
//$(function () {
// $('.scroll').jscroll({
// autoTrigger: true
// });
$('.fancybox-thumbs').fancybox({
prevEffect: 'none',
nextEffect: 'none',
closeBtn: true,
arrows: false,
nextClick: false
});
// Document.ready -> link up remove event handler
$("#AddToCart").click(function () {
//first disable the button to prevent double clicks
$("#AddToCart").attr("disbled", true);
$("#AddToCart").prop("value", "Adding...");
$("#ItemAdded").text("");
//now show the loading gif
$("#sending").css("display", "block");
// Get our values
var price = parseFloat($(".divPrice").attr("id"));
var quantity = parseInt($("#quantity").val());
var id = parseInt($(".divId").attr("id"));
$.ajax({
url: "@Url.Action("AddToCartAJAX", "Orders")",
type: "POST",
data: { "id": id, "quantity": quantity, "price": price },
//if successful
success: function (data) {
successfulCall()
},
error: function (data) {
alert(data.Message);
}
});
function successfulCall() {
//enable the send button
$("#AddToCart").attr("disbled", false);
//hide the sending gif
$("#sending").css("display", "none");
//change the text on the button back to Send
$("#AddToCart").prop("value", "Add to Cart");
//display the successful message
$("#ItemAdded").text("Your item has been added to your order.");
//clear out all the values
$("input#quantity").val("0");
}
function errorCall() {
$("#AddToCart").attr("disbled", false);
$("#sending").css("display", "none");
$("#AddtoCart").prop("value", "Add to Cart");
$("#ItemAdded").text(data.message);
}
//alert('Clicked!');
});
//s});
</script>
}
Can someone show me what I am doing wrong here so I can get this working?
EDIT #1
Here is the updated jQuery code:
$(".AddToCart").click(function () {
//first disable the button to prevent double clicks
$(this).prop("disbled", true).prop("value", "Adding...");
$("#sending").css("display", "block");
var td = $(this).closest('td')
//traverse DOM and find relevant element
var price = parseFloat(td.find(".divPrice").prop("id")),
quantity = parseInt(td.find("#quantity").val()),
id = parseInt(td.find(".divId").prop("id"));
$.ajax({
url: "@Url.Action("AddToCartAJAX", "Orders")",
type: "POST",
data: { "id": id, "quantity": quantity, "price": price },
//if successful
success: function (data) {
successfulCall()
},
error: function (data) {
errorCall(data);
}
});
It worked before making the client side changes (granted only once and only for the first item in the list), since I havent changed the server side code what could have gone wrong? EDIT #2
Here is the whole thing in it's entirity
@model IEnumerable<AccessorizeForLess.ViewModels.DisplayProductsViewModel>
@{
ViewBag.Title = "Products > Necklaces";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<link href="~/Content/Site.css" rel="stylesheet" />
<link href="~/Content/jquery.fancybox.css?v=2.1.5" rel="stylesheet" />
<link href="~/Content/jquery.fancybox-buttons.css?v=1.0.5" rel="stylesheet" />
<link href="~/Content/jquery.fancybox-thumbs.css?v=1.0.7" rel="stylesheet" />
<h2>Products > Necklaces</h2>
<div id="update-message"></div>
<p class="button">
@Html.ActionLink("Create New", "Create")
</p>
@*@using (Html.BeginForm("AddToCart", "Orders", FormMethod.Post))*@
{
<div id="container">
<div id="sending" style="display:none;"><img src="~/Content/ajax-loader.gif" /></div>
<div style="color:red" id="ItemAdded"></div>
<div class="scroll">
@foreach (var item in Model)
{
<div class="scroll2">
<div class="itemcontainer">
<table>
<tr>
<td id="@item.Id" class="divId">
<div class="DetailsLink" id="@item.Id"> @Html.ActionLink(@item.Name, "Details", new { id = item.Id })</div>
<br />
<div id="@item.Id"></div>
<div class="divPrice" id="@item.Price">@Html.DisplayFor(modelItem => item.Price)</div>
<div class="divImg"><a class="fancybox-thumbs" href="@item.Image.ImagePath" title="@item.Image.AltText" data-fancybox-group="thumb"><img src="@item.Image.ImagePath" alt="@item.Image.AltText" title="@item.Image.AltText" /></a></div>
<div> </div>
<div class="divQuantity"> Quantity: @Html.TextBoxFor(modelItem => item.Quantity, new { @style = "width:50px;", @class = "formTextBox quantity" })</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="button" value="AddToCart" class="btn btn-default AddToCart" />
</div>
</div>
<div style="height:15px;"></div>
</td>
</tr>
</table>
</div>
</div>
}
<div class="button">@Html.ActionLink("Back To Categories","Categories")</div>
<br />
</div>
</div>
@*}*@
@section scripts {
<script src="~/Scripts/jQuery-jScroll.js"></script>
<script src="~/Scripts/jquery.fancybox.js?v=2.1.5"></script>
<script src="~/Scripts/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script src="~/Scripts/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript">
//$(function () {
// $('.scroll').jscroll({
// autoTrigger: true
// });
$('.fancybox-thumbs').fancybox({
prevEffect: 'none',
nextEffect: 'none',
closeBtn: true,
arrows: false,
nextClick: false
});
// Document.ready -> link up remove event handler
$(".AddToCart").click(function () {
//first disable the button to prevent double clicks
$(this).prop("disbled", true).prop("value", "Adding...");
$("#sending").css("display", "block");
var td = $(this).closest('td')
//traverse DOM and find relevant element
var price = parseFloat(td.find(".divPrice").prop("id")),
quantity = parseInt(td.find(".quantity").val()),
id = parseInt(td.find(".divId").prop("id"));
$.ajax({
url: "@Url.Action("AddToCartAJAX", "Orders")",
type: "POST",
data: { "id": id, "quantity": quantity, "price": price },
//if successful
success: function (data) {
successfulCall()
},
error: function (data) {
errorCall(data);
}
});
function successfulCall() {
//enable the send button
$(this).prop("disbled", false).prop("value", "Add To Cart");
//hide the sending gif
$("#sending").css("display", "none");
//display the successful message
$("#ItemAdded").text("Your item has been added to your order.");
//clear out all the values
$("input#quantity").val("0");
}
function errorCall(data) {
$(this).prop("disbled", false).prop("value", "Add To Cart");
$("#sending").css("display", "none");
$("#ItemAdded").text(data.message);
}
//alert('Clicked!');
});
//s});
</script>
}
EDIT #2
Here is the code for AddToCartAJAX in OrdersController:
public ActionResult AddToCartAJAX(int id, int quantity, decimal price)
{
var cart = ShoppingCart.GetCart(this.HttpContext);
cart.AddToCart(id, quantity, price);
return RedirectToAction("Index");
}
And AddToCart in ShoppingCrt.cs:
public void AddToCart(int id, int quantity, decimal price)
{
// Get the matching cart and product instances
var order = entities.Orders.FirstOrDefault(
c => c.OrderGUID == ShoppingCartId
&& c.OrderItems.Where(p => p.ProductId == id).FirstOrDefault().ProductId == id);
if (order == null)
{
// Create a new order since one doesn't already exist
order = new Order
{
InvoiceNumber = Guid.NewGuid().ToString(),
OrderDate = DateTime.Now,
OrderGUID = ShoppingCartId,
IsShipped = false
};
entities.Orders.Add(order);
// Save changes
entities.SaveChanges();
//add the OrderItem for the new order
OrderItem oi = new OrderItem()
{
OrderId = order.OrderId,
OrderGUID = ShoppingCartId,
ProductId = id,
ProductQuantity = quantity,
ProductPrice = price
};
entities.OrderItems.Add(oi);
entities.SaveChanges();
}
else
{
// If the item does exist in the cart,
// then add one to the quantity
order.OrderItems.Where(p => p.ProductId == id).FirstOrDefault().ProductQuantity += quantity;
}
}
Hope that helps
via Chebli Mohamed
Detecting whether mouse is in an element with jQuery
I have a web page that uses jQuery. My page looks something like this:
<div id="page">
<!-- Stuff here -->
<div id="content">
<div class="row">
<div class="col"><!-- stuff --></div>
<div class="col"><!-- stuff --></div>
<div class="col"><!-- stuff --></div>
<div class="col"><!-- stuff --></div>
</div>
<div class="row">
<div class="col"><!-- stuff --></div>
<div class="col"><!-- stuff --></div>
<div class="col"><!-- stuff --></div>
</div>
</div>
<!-- Stuff here -->
</div>
<div id="note" style="display:none;">
<!-- stuff here -->
</div>
var noteTimeout = null;
var note = $('#note');
$(".row")
.mouseover(function () {
var col = $(this).find('.col:last');
var p = col.position();
note.css({zIndex:1000, top: p.top, left: (p.left + col.width() - note.width()/2) });
note.show();
})
.mouseout(function (e) {
if (noteTimeout != null) {
clearTimeout(noteTimeout);
}
noteTimeout = setTimeout(function () {
noteToolbar.fadeOut(150);
}, 250);
})
;
Basically, when a user hovers over a row, I'm trying to show a note in the last column of the row. If a user moves to another row, the note moves to that row. However, if the user's mouse is outside of the "content" area, I want to hide the note after 250 milliseconds. The last requirement is causing me problems.
As it is, the note disappears after 250 milliseconds if I change rows. However, if I remove the timeout, the note flickers if a user moves their mouse over it.
via Chebli Mohamed
TouchSwipe-Jquery-Plugin scroll issue
I'm attempting to use the TouchSwipe-Jquery-Plugin to allow users to flick between two peices of content, left and right.
However, whilst this functionality is working, it doesnt allow the user to scroll up or down the page, which is requeired as the content overflows the viewport.
Here is my code:
$("#content").swipe( {
//Generic swipe handler for all directions
allowPageScroll:"AUTO",
swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
if(direction == "left") {
$('#accepts').show();
$('#data').hide();
}
if(direction == "right") {
$('#data').show();
$('#accepts').hide();
}
}
});
Does anyone know of a way to use this plugin whilst allowing the user to scroll?
Thanks
via Chebli Mohamed
How to write a good Caps Lock detection solution in JavaScript?
EDIT: Figured it out on my own
For whom it may concern, a solution for caps detection in vanilla JavaScript. The problem with most of the solutions floating around on the internet is they only show/hide an alert/popup when the user starts typing in the input field. This is not optimal because the "Caps Lock is on" notification is still visible after the user has turned Caps Lock off, and remains so until they resume typing. This is long and unwieldy, and I still don't quite understand it myself. But I recommend it all the same.
function capsDetect() {
var body = document.getElementsByTagName('body')[0];
var isShiftPressed = false;
var isCapsOn = null;
var capsWarning = document.getElementById('caps-lock-warning');
body.addEventListener('keydown', function(e) {
var keyCode = e.keyCode ? e.keyCode : e.which;
if (keyCode = 16){
isShiftPressed = true;
}
});
body.addEventListener('keyup', function(e) {
var keyCode = e.keyCode ? e.keyCode : e.which;
if(keyCode == 16) {
isShiftPressed = false;
}
if(keyCode == 20) {
if(isCapsOn == true) {
isCapsOn = false;
capsWarning.style.visibility = 'hidden';
} else if (isCapsOn == false) {
isCapsOn = true;
capsWarning.style.visibility = 'visible';
}
}
});
body.addEventListener('keypress', function(e) {
var keyCode = e.keyCode ? e.keyCode : e.which;
if(keyCode >= 65 && keyCode <= 90 && !isShiftPressed) {
isCapsOn = true;
capsWarning.style.visibility = 'visible';
} else {
capsWarning.style.visibility = 'hidden';
}
});
}
shiftCaps();
via Chebli Mohamed
How to play a number of sounds in sequence with JavaScript?
I have a number of mp3 sounds (i, y, e etc.). I would like to play them in a sequence (i.e. without any pauses between them) when user pressed the button based on the word given by user in the text field (for ex., eye).
I know that audio could be played with usage of the following HTML:
<source type="audio/mpeg" id="mp3"></source>
but looks like this is different from what I need.
via Chebli Mohamed
Horizontally aligning textbox with label when the two are in different divs
I am trying to align a series of text boxes with their corresponding labels. Since they are in two different divs, I am unable to use the inherit keyword. I have tried using the javascript/jquery code below to align the pairs of elements, but $(tb).css('left') just returns auto. Does anyone know how to achieve this alignment using html, css, and/or javascript/jquery and without using a table?
$(function() {
$('#infoLabels label').each(function(idx,lbl) {
var tb = $('#' + lbl.htmlFor);
($(tb).width() > $(this).width()) ? $(this).width($(tb).width()) : $(tb).width($(this).width());
$(this).css('left',$(tb).css('left'));
});
});
Thanks in advance.
via Chebli Mohamed
How to add user input at caret position?
I am facing a weird issue regarding a textbox.Lets say I enter some text in it.Now if I change the caret position in between the already entered text and try to add text there, the caret automatically jumps to the end of the text. How can I avoid this?
Any help is really appreciated.
Textbox :-
<div class="form-group">
<label data-i18n="rpt_name"></label>
<span class="required">*</span>
<input type="text" class="form-control" id="subNameID">
</div>
via Chebli Mohamed
Bootstrap Carousel Loading, Not Scrolling
I'm setting up a Bootstrap Carousel working from a Django-powered image database. I have no errors in the console log, jQuery is loading, etc., so I'm definitely missing something painfully obvious. It does not transition to other slides, and the controls are not working either. I have tried loading the carousel library separately, and nothing seems to work. I'm using jQuery 1.11.0 loaded via CDN from Google.
ETA:
I am loading bootstrap.min.js after jQuery. I normally have some custom JS running, but I've removed that script for testing.
Here's the Django code generating the carousel:
<div id="mycarousel" class="carousel slide" data-interval="7000" data-ride="carousel">
<ol class="carousel-indicators">
{% for image in index_carousel %}
{% if forloop.first %}
<li data-target='#mycarousel' class='active' data-slide-to='{{ forloop.counter }}'></li>
{% else %}
<li data-target='#mycarousel' data-slide-to='{{ forloop.counter }}'></li>
{% endif %}
{% endfor %}
</ol>
<div class="carousel-inner">
{% for image in index_carousel %}
{% if forloop.first %}
<div class="item active">
{% else %}
<div class="item">
{% endif %}
<img class="img-responsive" src="{{ image.carousel_image.url }}" alt="Carousel Slide - {{ image.alt_text }}">
</div>
{% endfor %}
</div>
<!-- Controls -->
<a class="left carousel-control" href="#mycarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#mycarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div> <!-- Carousel -->
Here's the generated HTML:
<div id="mycarousel" class="carousel slide" data-interval="7000" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target='#mycarousel' class='active' data-slide-to='1'></li>
<li data-target='#mycarousel' data-slide-to='2'></li>
<li data-target='#mycarousel' data-slide-to='3'></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img class="img-responsive" src="/media/carousel_images/staff_blogs.png" alt="Carousel Slide - ">
</div>
<div class="item">
<img class="img-responsive" src="/media/carousel_images/aarp-tax-help-slide_ZznUFS2.png" alt="Carousel Slide - ">
</div>
<div class="item">
<img class="img-responsive" src="/media/carousel_images/august_book_sale_new.png" alt="Carousel Slide - ">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#mycarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#mycarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div> <!-- Carousel -->
Edit, 13:40UTC:
I removed the "data-ride" and "data-interval" attributes and tried loading the carousel manually with:
<script>
$(document).ready(function() {
$('#mycarousel').carousel();
})
</script>
I placed this at the bottom of the page, after the jQuery and bootstrap.min.js were loaded. Still no console errors, and still no functionality.
EDIT 13:55UTC:
Checked my bootstrap.min.js to make sure it wasn't corrupted and contained the carousel function.
EDIT 14:05UTC:
Okay, I now have a console log error: I changed the $(document).ready() to:
$(document).ready( $('#mycarousel').carousel() );
I'm now getting a $(...).carousel() is not a function as a message in the console.
via Chebli Mohamed
Smooth scrolling to an anchor on page?
Here is the HTML for the clickable div I am using:
<div class="arrow bounce" id="down-arrow" onclick="location.href='#about-me';">
How can I get this to scroll smoothly to the div rather than jump? I've looked at some jQuery options but they don't work as they use a href.
via Chebli Mohamed
jQuery make animation in pseudo after
I have my markup and css like this
<div class="box">Box Content</div>
css goes like this
<style>
@-webkit-keyframes widthresize {
0% {
width:10px
}
50% {
width:50px
}
100% {
width:100px
}
}
@-moz-keyframes widthresize {
0% {
width:0%
}
50% {
width:50%
}
100% {
width:100%
}
}
@-ms-keyframes widthresize {
0% {
width:0%
}
50% {
width:50%
}
100% {
width:100%
}
}
@keyframes widthresize {
0% {
width:0%
}
50% {
width:50%
}
100% {
width:100%
}
}
body {
background-color: #333;
}
.box {
color: #FFF;
}
.box::after {
background: #FFF;
content: '';
position: relative;
width: 0;
height: 1px;
left: 0;
display: block;
clear: both;
}
.widthanimation::after {
-webkit-animation-name: widthresize;
-moz-animation-name: widthresize;
-o-animation-name: widthresize;
-ms-animation-name: widthresize;
animation-name: widthresize;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease;
-o-animation-timing-function: ease;
}
</style>
and the jQuery like this
jQuery(document).ready(function($) {
$('div.box').addClass('widthanimation');
});
I want that when jQuery adds class widthanimation to the div then in pseudo after it will start to animate the width to 100%. For animation I have used css keyframe which you can see in the css. But its not working at all. Sorry but I can't change my markup. So can someone tell me how to get the animation with this markup? Any help and suggestions will be really appreciable. The fiddle link can be seen here Thanks.
via Chebli Mohamed
How to get a hover effect for glyphicon icons?
I'm trying to make glyphicon icon appear every time I hover my mouse over it. And I'm using <span> tag for it. But this refuses to work. What have I done wrong?
application.scss
/*
*= require bootstrap3-editable/bootstrap-editable
*= require bootstrap-datepicker3
*= require_tree .
*/
@import "bootstrap-sprockets";
@import "bootstrap";
.hovering:before {
display: none;
}
.hovering:hover:before {
display: block;
}
In my view file it looks like this:
<span class='hovering'>
<%= link_to user_task_path(current_user, task.id), method: :delete,
data: { confirm: 'Are you sure?' }, remote: true do %>
<i class="glyphicon glyphicon-trash"></i>
<% end %>
</span>
via Chebli Mohamed
Jquery/Ember object iteration
I have an ember app with that shows jobs positions. Im trying to filter those jobs positions depending of the ip location.
Im using geonames for searching the state based in the latitude and longitude of the request.
The api request is made in
var state=StateAdapter.getState(location);
Then, i print the result
console.log(state);
I have this returning object state:
Object {readyState:1 }
abort: ( statusText )
always: ()
complete: ()
done: ()
error: ()
fail: ()
getAllResponseHeaders: ()
getResponseHeader: ( key )
overrideMimeType: ( type )
pipe: ( /* fnDone, fnFail, fnProgress */ )
progress: ()
promise: ( obj )
readyState: 4
responseJSON: Object
responseText: "{"geonames": [{"adminCode2":"039","countryName":"Mexico","adminCode1":"19","lng":"-100.29265","adminName2":"Monterrey","fcodeName":"populated place","adminName3":"","distance":"1.07626","timezone":{"dstOffset":-5,"gmtOffset":-6,"timeZoneId":"America/Monterrey"},"adminName4":"","adminName5":"","name":"Norte de Monterrey","fcode":"PPL","geonameId":9072770,"asciiName":"Norte de Monterrey","lat":"25.63646","population":0,"adminName1":"Nuevo León","countryId":"3996063","adminId1":"3522542","fclName":"city, village,...","elevation":0,"countryCode":"MX","adminId2":"8582459","toponymName":"Norte de Monterrey","fcl":"P","continentCode":"NA"}]}"
setRequestHeader: ( name, value )
state: ()
status: 200
statusCode: ( map )
statusText: "OK"
success: ()
then: ( /* fnDone, fnFail, fnProgress */ )
__proto__: Object
But when i do this:
$.each( state, function( key, value ) {
console.log("state["+key +"]" + value);
});
Console doesnt print readyState, responseJSON, responseText, status nor statusText. I need responseText result to filter my model.
What am i doing wrong? Thanks guys.
via Chebli Mohamed
Slide down navigation with list items moving
I have a navigation that slides down in a way that background color slides down and the list items fade in, but are not moving from the top downwards and that is what i would like to achieve.
Must be simple by adding a top value with addClass/removeClass, but can't seem it to work within the javascript.
Note: .nav-toggle is the hamburger icon which is the trigger that works fine.
Hope someone can help me.
Javascript:
// Navigation //
$(function() {
$('.nav-toggle').click(function() {
event.preventDefault();
$('nav ul.right-nav').slideFadeToggle(300);
$('.nav-toggle').toggleClass('is-active');
})
});
$(window).scroll(function() {
if ($(this).scrollTop() > 50) {
$('nav ul.right-nav').hide();
$('.nav-toggle').removeClass('is-active');
}
});
$.fn.slideFadeToggle = function(speed, easing, callback) {
return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
};
Html:
<header>
<nav>
<div class="mobile-nav">
<div class="nav-toggle"><i class="nav-icon"></i></div>
</div>
<ul class="left-nav">
<li class="home"><a href="#">Pixelation</a></li>
</ul>
<ul class="right-nav">
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
via Chebli Mohamed
looking for best guidance to annotate or mark images and load the annotate images from database
i want to mark or annotate images with jquery and found some plugin which does the jobs. few plugin links as follows.
http://ift.tt/1IDUF4n
http://ift.tt/1IDUF4p
http://ift.tt/1eDKz6g
http://ift.tt/1IDUFkF
http://ift.tt/1IDUCWc
http://ift.tt/V0k3cj
http://ift.tt/1IDUCWf
http://ift.tt/1MJZqAj
http://annotatorjs.org/
my main concern is how to save annotate or marker into database. so later when i will show the annotate images later then i have to show those marker and annotate....so user can see what text or notes was used at the time of annotation or marking images.
please guide me how to save annotation in database and also tell me how to show images again with annotation load from database
looking for code sample to save annotation in database and annotation load from database on images. thanks
via Chebli Mohamed
custom Bootstrap 3 nav-pills not work
I custom nav-pills for change background in default,hover and focus Like this :
.nav-pills > li > a {
background:#FFF;
border-radius:0;
color: #777;
border-right:5px solid #DDD;
border-top:1px solid #ddd;
border-bottom:1px solid #ddd;
}
.nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus {
background:#f7f7f7;
border-radius:0;
color: #777;
border-right:5px solid #005090;
border-top:1px solid #ddd;
border-bottom:1px solid #ddd;
}
But in action border-right not true work and not show in 5 pixel. how do fix this ?
DEMO : http://ift.tt/1VYYQBJ
via Chebli Mohamed
how to pass variables though javascript to ajax using jquery-tabledit?
I am currently using the jquery plugin Tabledit and when i use an inline edit as in example 3 it calls my php page. I have no idea how to pass the changes I made in the edit to the new php page so i can change it in the database. it changes when you hit enter. (im guessing on enter it calls the edittask.php)
html here is one section of the table. it changes on hitting enter after you type in new text.
<td class="tabledit-view-mode"> <span class=" tabledit-span ">header text</span>
<input class="tabledit-input form-control input-sm" type="text" name="description" value=" " style="display: none;" disabled="" />
</td>
javascript
$('#thetable').Tabledit({
url: 'editTask.php',
editButton: false,
deleteButton: false,
columns: {
identifier: [0, 'id'],
editable: [
[1, 'Header'],
[2, 'Description']
]
}
});
via Chebli Mohamed
jquery - click on table row to append value in checkboxes
JS
$(document).ready(function() {
$('.tg tr.data-list-row[name=data-list-row]').click(function() {
var currentId = $(this).closest('tr').attr('id');
$.getJSON('<%=request.getContextPath()%>/ws/booking/getpriceinput_by_id/' + currentId, function(data) {
$("#current_typetarif_id").val(data.id);
$("#inputName").val(data.libelle);
$("#inputCode").val(data.code);
$("#inputTarif").val(data.montantTarifDefaut);
});
});
});
<div class="table-responsive">
<table class="table tg" style="table-layout: fixed; width: 745px">
<colgroup>
<col style="width: 249px">
<col style="width: 249px">
<col style="width: 249px">
</colgroup>
<thead>
<tr>
<th class="tg-s6z2 bdleft">NOM</th>
<th class="tg-s6z2">CODE</th>
<th class="tg-s6z2">PRIX PAR DEFAUT</th>
</tr>
</thead>
<tfoot>
</tfoot>
<tbody>
<tr>
<td colspan="5">
<div class="scrollit">
<table class="table tg" style="table-layout: fixed;">
<colgroup>
<col style="width: 220px">
<col style="width: 240px">
<col style="width: 240px">
</colgroup>
<c:forEach items="${type_tarif_list}" var="type_tarif" varStatus="loop">
<tr class="data-list-row" name="data-list-row" id="${type_tarif.id}" style="cursor: pointer;">
<td class="tg-s6z2 bdleft">${type_tarif.libelle}</td>
<td class="tg-s6z2">${type_tarif.code}</td>
<td class="tg-s6z2">${type_tarif.montantTarifDefaut}</td>
<td class="deleterow bdryt" id="${type_tarif.id}" name="del_button">
<div class="glyphicon glyphicon-remove" title="Supprimer"></div>
</td>
</tr>
</c:forEach>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<form class="form-horizontal" style="margin: 0 auto; width: 150px;" id="scrollit" name="thisForm">
<c:forEach items="${option_tarif_list}" var="option_tarif" varStatus="loop">
<div class="checkbox1">
<label>
<input type="checkbox" name="tarif_inclue" value="${option_tarif.libelle}" class="checkboxchk" id="option_tarif_chk_${option_tarif.id}">${option_tarif.libelle}
</label>
</div>
</c:forEach>
</form>
JSON value extracted from database
{
"id": 1,
"code": "0001",
"libelle": "TARIF PUBLIC",
"montantTarifDefaut": 10.00,
"tarifTypeList": [
{
"chambreTypeId": 1,
"tarifTypeId": 1
}
],
"tarifTypeOptionList": [
{
"typeTarifId": 1,
"tarifOptionId": 1
},
{
"typeTarifId": 1,
"tarifOptionId": 2
},
{
"typeTarifId": 1,
"tarifOptionId": 3
}
]
}
Hi.
This block of code below make a select in the table row to display values into the texts fields.
$(document).ready(function() {
$('.tg tr.data-list-row[name=data-list-row]').click(function() {
var currentId = $(this).closest('tr').attr('id');
$.getJSON('<%=request.getContextPath()%>/ws/booking/getpriceinput_by_id/' + currentId, function(data) {
$("#current_typetarif_id").val(data.id);
$("#inputName").val(data.libelle);
$("#inputCode").val(data.code);
$("#inputTarif").val(data.montantTarifDefaut);
});
});
});
On clicking on the table row, i need to display the checked values in the checkbox. According to the id selected in the rows, specific values will be checked in the checkboxes. Those values are being extracted from a database through a JSON file. I should extract it using the value (data.tarifOptionId)
I think is should be put it in a loop, so that the id value is incremented when each table row is clicked. The id of the input is #option_tarif_chk_, and it is embeded in a cforeach loop.
I have written something like this below:
$.each(data, function(i, item) {
alert(item.tarifTypeOptionList[0].tarifOptionId);
});
But it is not working. The alert returns Uncaught TypeError: Cannot read property '0' of undefined
Any help will be much appreciated.
Thank you
via Chebli Mohamed
Centerize canvas text at all time, even if resized?
I am currently trying to work on this script, which was created by someone else. Yes, I grabbed it, yes I will give credits.
The problem I am having, is trying to center the text even if the window has been resized. When you move the cursor on the text, it explodes randomly. When I resize the window, I need that same text (and those exploded characters) to move. I can easily just put new text in using fillText(), but then I replace the exploded characters.
Obviously I have tried this in my example:
window.onresize = function(event) {
reload(canvas_id);
}
var reload = function(canvas_id) {
canvas = document.getElementById(canvas_id);
context = canvas.getContext("2d");
canvas.width = window.innerWidth;
}
This resizes the canvas perfectly, but the text won't be centered anymore. To center the text when I place it, I do this:
(window.innerWidth / 2) - (Math.round(bgContext.measureText(keyword).width/2))
bgContext being the canvas.getContext("2d"); obviously.
Here's a JSFiddle showing this issue: http://ift.tt/1gHeNwD
via Chebli Mohamed
How to hide an element until script animation is applied
how can i show a < script > in html before the page load the content?
<script>
function startTime() {
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('uhrzeit').innerHTML = h+":"+m+":"+s;
var t = setTimeout(function(){startTime()},500);
}
function checkTime(i) {
if (i<10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
</script>
the first one just shows the time of day... more important is the second part. At the moment the website is loading the content and shows me the Edge-Animate animation after the content is complete loaded. And you may mention it sucks that the animation comes after paged is loaded...
<!--Adobe Edge Runtime-->
<script>
var custHtmlRoot="hin-aktuell/Assets/";
var script = document.createElement('script');
script.type= "text/javascript";
script.src = custHtmlRoot+"edge_includes/edge.6.0.0.min.js";
var head = document.getElementsByTagName('head')[0], done=false;
script.onload = script.onreadystatechange = function(){
if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
done=true;
var opts ={
scaleToFit: "none",
centerStage: "none",
minW: "0px",
maxW: "undefined",
width: "100%",
height: "100%"
};
opts.htmlRoot =custHtmlRoot;
AdobeEdge.loadComposition('hin-aktuell', 'EDGE-2489594', opts,
{"dom":{}}, {"dom":{}});
script.onload = script.onreadystatechange = null;
head.removeChild(script);
}
};
head.appendChild(script);
</script>
via Chebli Mohamed
Form won't submit when showing certain fields
I am trying to create a drop down menu that allows a user to select which area they would like to login to. Currently, the drop down feature works and hides whichever areas the user is not logging into and shows only the area that they have selected. Using just the form without the dropdown works great and opens a new window while also logging the user in to the system. However, when I add the dropdown menu and surround the form in tags, it allows me to enter the data but does not process the data.
If possible I would also like to have the form open a new tab in the current browser window(not in a completely new window).
-I cannot change the forms at all besides things that won't matter because they have been given to me from an external source.
Here is my code:
$(document).ready(function() {
toggleFields(); //call this first so we start out with the correct visibility depending on the selected form values
//this will call our toggleFields function every time the selection value of our repository field changes
$("#member").change(function() {
toggleFields();
});
});
//this toggles the visibility of the 3 different forms depending on which repository the user is logging into.
function toggleFields() {
if ($("#member").val() == 1)
$("#depo").show();
else
$("#depo").hide();
if ($("#member").val() == 2)
$("#records").show();
else
$("#records").hide();
if ($("#member").val() == 3)
$("#reporter").show();
else
$("#reporter").hide();
}
<script src="http://ift.tt/1qRgvOJ"></script>
<select id="member" name="member">
<option value="0">---</option>
<option value="1">Deposition Repository</option>
<option value="2">Records Repository</option>
<option value="3">Reporter Area</option>
</select>
<div id="depo">
<p>Login to Access your Deposition Repository</p>
<p>
<script type="text/javascript" src="http://ift.tt/1P3HeQs"></script>
<form name="frmrbwebattorney" method="post" action="http://ift.tt/1P3Hdw0">
User ID:
<input type="text" name="rbwebuserid" style="width:130px;" value="" maxlength=30>Password:
<input type="password" name="rbwebpassword" style="width:130px;" value="" maxlength=65 onkeypress="javascript:if(event.keyCode ==13) login(document.frmrbwebattorney,1);">
<INPUT type="button" value="Log In" style="font-size:11px;" style="width:64px" onclick="javascript:login(document.frmrbwebattorney,1);" id=btnptarbweb name=btnptarbweb>
<INPUT type="hidden" name="appname" value="">
<INPUT type="hidden" name="os" value="">
</form>
</p>
</div>
<div id="records">
<p>Login to Access your Records Repository.</p>
<p>
<script type="text/javascript" src="http://ift.tt/1gHeNwv"></script>
<form name="frmrbwebattorney" method="post" action="http://ift.tt/1P3HeQu">
User ID:
<input type="text" name="rbwebuserid" style="width:130px;" value="" maxlength=16>Password:
<input type="password" name="rbwebpassword" style="width:130px;" value="" maxlength=65 onkeypress="javascript:if(event.keyCode ==13) login(document.frmrbwebattorney,1);">
<INPUT type="button" value="Log In" style="font-size:11px;" style="width:64px" onclick="javascript:login(document.frmrbwebattorney,1);" id=btnptarbweb name=btnptarbweb>
<INPUT type="hidden" name="appname" value="">
<INPUT type="hidden" name="os" value="">
</form>
</p>
</div>
<div id="reporter">
<p>Login to the Reporter Area.</p>
<p>
<script type="text/javascript" src="http://ift.tt/1P3HeQs"></script>
<form name="frmrbwebreporter" method="post" action="http://ift.tt/1gHeNwx">
User ID:
<input type="text" name="rbwebuserid" style="width:130px;" value="" maxlength=16>Password:
<input type="password" name="rbwebpassword" style="width:130px;" value="" maxlength=65 onkeypress="javascript:if(event.keyCode ==13) login(document.frmrbwebreporter,1);">
<INPUT type="button" value="Log In" style="font-size:11px;" style="width:64px" onclick="javascript:login(document.frmrbwebreporter,1);" id=btnptarbweb name=btnptarbweb>
<INPUT type="hidden" name="appname" value="">
<INPUT type="hidden" name="os" value="">
</form>
</p>
</div>
Any help will be greatly appreciated!
via Chebli Mohamed
CSS or jQuery hover effect to increase a fixed box and show absolute position larger version
does anyone know how i can make my colour boxes increase in size (in same position, guessing absolute position so it does not effect the other positions of colours) when you hover will show a larger version of the colour when you hover... maybe background image size? dont know.
I have added a image for a test on the red one.
#product_color_select li {
display: inline-block;
width: 30px;
height: 25px;
text-indent: -999999em;
cursor: pointer;
}
/* interior colours */
#product_color_select li.eco-weave {
background-color: #beaaaa;
}
#product_color_select li.aubergine-dream {
background-color: #382643;
}
#product_color_select li.lime-citrus {
background-color: #99a366;
}
#product_color_select li.blue-jazz {
background-color: #435fa1;
}
#product_color_select li.sakura-pink {
background-color: #bf3253;
}
#product_color_select li.hot-chocolate {
background-color: #3b2b28;
}
#product_color_select li.tundra-spring {
background-color: #c5c1d0;
}
#product_color_select li.black-sapphire {
background-color: #131114;
}
#product_color_select li.luscious-grey {
background-color: #7a6772;
}
#product_color_select li.wildberry-deluxe {
background-image: url('http://ift.tt/1gHeNg4');
}
<ul class="fabric-select" id="product_color_select">
<li class=" eco-weave" data-value="742" title="Eco Weave">Eco Weave</li>
<li class=" blue-jazz" data-value="749" title="Blue Jazz">Blue Jazz</li>
<li class=" sakura-pink" data-value="743" title="Sakura Pink">Sakura Pink</li>
<li class="selected luscious-grey" data-value="744" title="Luscious Grey">Luscious Grey</li>
<li class=" lime-citrus" data-value="748" title="Lime Citrus">Lime Citrus</li>
<li class=" hot-chocolate" data-value="741" title="Hot Chocolate">Hot Chocolate</li>
<li class=" black-sapphire" data-value="746" title="Black Sapphire">Black Sapphire</li>
<li class=" wildberry-deluxe" data-value="727" title="Wildberry Deluxe">Wildberry Deluxe</li>
<li class=" tundra-spring" data-value="747" title="Tundra Spring">Tundra Spring</li>
<li class=" aubergine-dream" data-value="745" title="Aubergine Dream">Aubergine Dream</li>
</ul>
Thanks in advance
via Chebli Mohamed
Displaying tables like Excel
I'm working on a web app using servlet and JSP. I have two tables and I want to display them in my page like in Excel.
For exemple when a click on "Table 1" ,Like in excel sheets, The table 1 will be displayed and the same for table 2. Does somebody know how can I do it ? It may be done with Jquery, but I don't know how. Thank you for your help.
via Chebli Mohamed
JSON encoding array
I have a jQuery graph which builds the x-axis like so:
xaxis: {
tickColor: 'transparent',
tickDecimals: 0,
ticks: [[1,'27/07'],[2,'28/07'],[3,'29/07'],[4,'30/07'],[5,'31/07'],[6,'01/08'],[7,'02/08']]
},
I want the 'ticks' to be generated by a piece of javascipt that loops between 2 variable dates like so:
var i = 1;
var superArray = [];
var subArray = [];
for (var d = d1; d <= d2; d.setDate(d.getDate() + 1)) {
var m0 = d.getMonth() + 1;
var d0 = d.getDate();
m0 = m0 > 9 ? m0 : "0"+m0;
d0 = d0 > 9 ? d0 : "0"+d0;
var x = d0 + '/' + m0;
subArray.push(i, x);
superArray.push(subArray.slice(0));
i++;
}
console.log(JSON.stringify(superArray));
The console.log looks like so:
[[1,"27/07"],[1,"27/07",2,"28/07"],[1,"27/07",2,"28/07",3,"29/07"],[1,"27/07",2,"28/07",3,"29/07",4,"30/07"],[1,"27/07",2,"28/07",3,"29/07",4,"30/07",5,"31/07"],[1,"27/07",2,"28/07",3,"29/07",4,"30/07",5,"31/07",6,"01/08"],[1,"27/07",2,"28/07",3,"29/07",4,"30/07",5,"31/07",6,"01/08",7,"02/08"]]
Which is kinda close to what I want but not quite!
How can I make this:
[[1,"27/07"],[1,"27/07",2,"28/07"],[1,"27/07",2,"28/07",3,"29/07"],[1,"27/07",2,"28/07",3,"29/07",4,"30/07"],[1,"27/07",2,"28/07",3,"29/07",4,"30/07",5,"31/07"],[1,"27/07",2,"28/07",3,"29/07",4,"30/07",5,"31/07",6,"01/08"],[1,"27/07",2,"28/07",3,"29/07",4,"30/07",5,"31/07",6,"01/08",7,"02/08"]]
Look like this:
[[1,'27/07'],[2,'28/07'],[3,'29/07'],[4,'30/07'],[5,'31/07'],[6,'01/08'],[7,'02/08']]
via Chebli Mohamed
How do I use a code more than once using dynamic pages?
i'm using this tutorial in order to change the content of my pages without refreshing the page. http://ift.tt/1P3HsXU
It's working pretty fine (the pages do change) but, the content I wanna replace is a showcase using this plugin : http://ift.tt/q9Eo6i
When I first load the page, everything works fine but, when I open another page, the content is replace but the code that transform this content into a showcase is not applied so I only have staked images and no showcase.
So, I was wondering if there was any way to trigger the js file without refreshing the whole page.
via Chebli Mohamed
jQuery live calc multirow input
This is my code:
<?php
for($i=1;$i<10;$i++){
echo '<input type="text" class="count value'. $i .'">';
echo '<input type="text" class="count '. $i .'value">';
echo '<input type="text" disabled="disabled" id="result'. $i .'"><p>';
}
echo '<input type="text" disabled="disabled" id="total"><p>';
?>
and jq
$(document).ready(function(){
$(".count").keyup(function(){
for (var i = 0; i < 10; i++) {
var val1 = +$(".value"+ i).val();
var val2 = +$("."+ i +"value").val();
$("#result" + i).val(val1*val2);
}
});
});
$(document).ready(function(){
$(".count").keyup(function(){
for (var i = 0; i < 10; i++) {
var vala = 0;
vala += +$("#result"+ i).val();
}
$("#total").val(vala);
});
});
First part of code works great. Return multiplication two inputs to id=result$i. I have a problem with last one id=total. It should return sum of all resultX inputs but now only return the last multiplication. Do You have any idea what's wrong?
via Chebli Mohamed
On button click put all elements src to array
I have many divs with id="imgLinks"
<div><img id="imgLinks" u=image src="../../../../images/1.jpg" /></div>
<div><img id="imgLinks" u=image src="../../../../images/3.jpg" /></div>
<div><img id="imgLinks" u=image src="../../../../images/5.jpg" /></div>
I need on button click put all src to array
$(document).on('click', '#navigation #Download', function() {
var imgLinks = [];
$("#imgLinks").each(function() {
var name = $(this).attr("src");
imgLinks.push(name);
});
});
But this code put only first source, how to put all of them?
via Chebli Mohamed
jQuery: Toggle other dropdowns when any is toggled
I would like to know how I can make it so that when I have a dropdown opened and I open another one, it will close the one previously opened.
This is what I have so far:
$(document).ready(function(){
// Hide other drop downs when opening another
// $(".hideothers").hide();
// $(".show_hide_account").click(function(){
// $(".slidingDiv_account").slideToggle();
// });
// Account Drop down
$(".slidingDiv_account").hide();
$(".show_hide_account").show();
$(".hideothers").hide();
$(".show_hide_account").click(function(){
$(".slidingDiv_account").slideToggle();
});
// Work drop down
$(".slidingDiv_work").hide();
$(".show_hide_work").show();
$(".hideothers").hide();
$(".show_hide_work").click(function(){
$(".slidingDiv_work").slideToggle();
});
});
<script src="http://ift.tt/1oMJErh"></script>
<!--sidebar start-->
<aside>
<!-- Start of Toggle -->
<div id="sidebar" class="nav-collapse ">
<!-- sidebar menu start-->
<ul class="sidebar-menu" id="nav-accordion">
<p class="centered"><a href="/user/#"><img src="assets/img/ui-sam.jpg" class="img-circle" width="60"></a></p>
<h5 class="centered">USER</h5>
<!-- Account Dropdown -->
<li>
<a class="show_hide_account">
<i class="fa fa-chevron-down"></i>
<span>Account</span>
</a>
</li>
<!-- Toggled Items -->
<ul class="sub slidingDiv_account hideothers" style="display: block;"> <!-- Start of toggle -->
<li>
<a href="/account">
<i class="fa fa-pencil"></i>
<span>Edit Account</span>
</a>
</li>
<li>
<a href="/users">
<i class="fa fa-pencil"></i>
<span>Find Users</span>
</a>
</li>
</ul> <!-- end of toggle -->
<!-- Work Dropdown -->
<li>
<a class="show_hide_work">
<i class="fa fa-suitcase"></i>
<span>Work</span>
</a>
</li>
<!-- Toggled Items -->
<ul class="sub slidingDiv_work hideothers" style="display: block;"> <!-- Start of toggle -->
<li>
<a href="/jobs">
<i class="fa fa-search"></i>
<span>Find a Job</span>
</a>
</li>
<li>
<a href="/startup">
<i class="fa fa-star"></i>
<span>Create a Startup</span>
</a>
</li>
</ul> <!-- end of toggle -->
<!-- <li class="mt">
<a href="index.html">
<i class="fa fa-users"></i>
<span>Friends</span>
</a>
</li> -->
</ul>
<!-- sidebar menu end-->
</div>
</aside>
<!--sidebar end -->
Refer to the snippet for a clearer idea. Click on account & work to see the dropdowns.
Thank you.
via Chebli Mohamed
Angular UI-Google-Map opening infoWindow
I'm using Angular-Google-maps to create a map with a markers displayed on it. I am able to click on a marker and show the associated infoWindow. However I wish to be able to click on a list of links to open the info window rather than click on the marker itself, something similar to this example here:
I have asked this question previously and it was suggested that in my <ui-gmap-windows> tag that I needed to add a models attribute, but when I look at Angular-Google-Maps documentation I do not see any examples of how to do that.
My html looks like this:
<div id="googleMap" class="col-xs-12 col-md-8">
<ui-gmap-google-map center='map.center' zoom='map.zoom'>
<ui-gmap-markers models="markers" coords="'coords'" icon="'icon'" click="onClick()" events="markersEvents" options="'options'">
<ui-gmap-windows show="show" closeClick="closeClick()" class="mapWindow" >
<div ng-non-bindable>{{id}} {{icon}} id="infoWindow"
<h1>{{name}}</h1>
<a href="#/detail/{{id}}" class="thumb">Show Detail</a>
</div>
</ui-gmap-windows>
</ui-gmap-markers>
</ui-gmap-google-map>
</div>
<div id="detail" class="col-xs-12 col-md-4">
<ul>
<li data-ng-repeat="x in markers">
<a ng-click="onClick()">{{x.name}}</a> <!-- Click on this linnk and find associated infoWindow to open -->
</li>
</ul>
</div>
And in my javascript I am creating the Map and markers as follows:
$scope.markers = [];
$http.get("json/locations.json").success(function(response) {
$scope.locations = response.dogFriendly;
jQuery.each($scope.locations, function(i, val){
console.log(i);
console.log(val.location);
var marker = {};
marker.name = val.name;
marker.id = i;
marker.coords = val.location;
marker.icon = '/images/pawIcon.png';
marker.onClick = function(){
$scope.windowOptions.visible = !$scope.windowOptions.visible;
}.bind(this);
$scope.markers.push(marker);
});
});
$scope.windowOptions = {
visible: false
};
$scope.onClick = function() {
$scope.windowOptions.visible = !$scope.windowOptions.visible;
};
$scope.closeClick = function() {
$scope.windowOptions.visible = false;
};
$scope.title = "Window Title!";
uiGmapGoogleMapApi.then(function(maps){
$scope.googleMap = {};
$scope.map = { center: { latitude: 53.347117, longitude: -6.280285 }, zoom: 14 };
});
uiGmapIsReady.promise()
.then(function(instances){
var maps = instances[0].map;
$scope.myOnceOnlyFunction(maps);
});
$scope.myOnceOnlyFunction = function (maps) {
var center = maps.getCenter();
var lat = center.lat();
var lng = center.lng();
};
$scope.showMarker = function(obj, $event){
var markerId = this.x.id;
for(var i = 0; i < $scope.markers.length; i++){
if(markerId == $scope.markers[i].id){
// open this markers infoWindow
$scope.markers[i].onClick = function(){
$scope.windowOptions.visible = !$scope.windowOptions.visible;
}
}
}
}
});
I'm trying to figure out how I can find the marker.id from a link click and then trigger the WindowOptions for that marker to open?
Any help would be appreciated.
via Chebli Mohamed
Two HTML selects with differing selected values
I got following HTML code:
<select id="first">
<option value="0" selected="selected"> default </option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select id="second">
<option value="0" selected="selected"> default </option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
So both of them have same data. I need to secure, that user can't select same value in both of them.
I hoped, that JQuery has some nice feature like:
$("#first").getOptions()
or even
$("#first").setOptions()
but unfortunately, it doesn't. This makes it very complicated for me, because I don't know JQuery very well ...
So, what is the best approach to solve my problem?
via Chebli Mohamed
How do you use docx.js?
I've been trying to use the docx.js library to turn HTML with images into a .docx file solely on the client.
I build the HTML up as a string in the format:
<html xmlns:office="urn:schemas-microsoft-com:office:office" xmlns:word="urn:schemas-microsoft-com:office:word" xmlns="http://ift.tt/qQdaDR">
<head>
<xml>
<word:WordDocument>
<word:View>Print</word:View>
<word:Zoom>90</word:Zoom>
<word:DoNotOptimizeForBrowser/>
</word:WordDocument>
</xml>
<style>Some CSS</style>
</head>
<body>
Some HTML
</body>
Do I need to format this before using the convertContent function? If I get through that, how does the output link up with the docx function?
via Chebli Mohamed
XMLHttpRequest error with Github Pages and subdomain [duplicate]
This question already has an answer here:
My custom domain is using my Github Pages source (domain.github.io), except a php file located at a subdomain on my account: http://ift.tt/1P3G0Vr to keep the info separate/private from Github. Now that my domain is going through Github Pages, I'm getting this error after my form submit.
The bizarre thing is, the form still works. It sends the text message, but I'm still getting the XMLHttpRequest error (and does not show ajax was successful).
Why is this an error if both domains are using domain.com?
XMLHttpRequest cannot load http://ift.tt/1P3G0Vr. Origin http://DOMAIN.com is not allowed by Access-Control-Allow-Origin. sendjquery-2.1.4.min.js:4:14958 ajaxjquery-2.1.4.min.js:4:10717 (anonymous function) formLogic.js:65 dispatchjquery-2.1.4.min.js:3:6472 handlejquery-2.1.4.min.js:3:3247
via Chebli Mohamed
dimanche 28 juin 2015
Semantic UI fixed header row
How to do a Semantic UI header row fixed position without breaking table data proportions? position: fixed at css did not work. It breaks table.
What is the best Approach for CSS framework of an Enterprise Cloud application?
There are several ways to style the elements in each page, in Enterprise applications usually the CSS Framework size increased about 1 MB, and when your users are using slow internet connection, you should decrease css framework size.
we can create new CSS for our element like .Blah and value it in css framework and do this for each element which cause increase size of css framework, but a cleaner page
<div id="blah" class="blah"></div>
we can also use our css framework utilities in each view to format each element to keep size of css framework, but a non-clean page
<div id="blah" class="margin10 padding20 bg-color-red fg-color-white text-bold else"></div>
which of above approach is the best approach for an Enterprise application, while you ensure that a majority of your users are using slow internet connection
Why is this JQUERY selector with a varibale and space not working?
$(".lookup "+id).css("background-color","green");
I want to to change the background of "lookup 123456" to green when matches are found. I write this to the console: console.log(".lookup "+id) it works fine. But it's not getting selected with the selector.
Any help?
Making a quick padding/margin library with loops + arrays in Less
I'm trying to understand the loop and array function in Less (css). But it seems like I can't find any good tutorials on the topic.
More specifically, I'm trying to code a quick padding- & margin class library for Bootstrap 3 using Less. The coder should only change som global variables and the library will rebuild the padding/margin functionality. I want the padding/margin to be responsive. Giving a more spaciesh design on big devices, and not so spaciesh on smaller devices.
I know that the current code is extremly repetitive and will, if I expand it to every device, an extremely long document with code, that isn't gracies nor giving an outside coder a good overview of the function.
So, what can I do to minimize the code into smaller loops and arrays?
//Global variables for space calculation in a mixin
// Variables for padding and margin sections - also refered to as mixin-space-value
@base-top-space: 100px;
@base-right-space: 100px;
@base-bottom-space: @base-top-space;
@base-left-space: @base-right-space;
// Variables for different Types of sizes of space - also refered to in mixin-space as @mixin-space-size
@space-small: 0.75;
@space-medium: 1;
@space-large: 1.75;
@space-xlarge: 2.5;
// Variables for different types of devices - also refered to in mixin-space as @mixin-space-device
@space-xs: 0.5;
@space-sm: 1;
@space-md: 1.25;
@space-lg: 1.5;
//Variables of types of space in mixin
// Padding
@space-type-padding-top: escape('padding:');
@space-type-padding-top: escape('padding-top:');
@space-type-padding-right: escape('padding-right:');
@space-type-padding-bottom: escape('padding-bottom:');
@space-type-padding-left: escape('padding-left:');
// Margin
@space-type-margin: escape('margin:');
@space-type-margin-top: escape('margin-top:');
@space-type-margin-right: escape('margin-right:');
@space-type-margin-bottom: escape('margin-bottom:');
@space-type-margin-left: escape('margin-left:');
// Mixin of padding space
// mixin-space-type: eg. padding-top, margin-right...
//
// Local variables Global variables:
// =============== ================
// Eg.: mixin-space-type = @space-type-padding-top
// Eg.: mixin-space-value = @base-top-space
// Eg.: mixin-space-size = @space-small, @space-medium, @space-large, @space-xlarge
// Eg.: mixin-space-device = @space-xs, @space-sm, @space-md, @space-lg
.mixin-space(@mixin-space-type, @mixin-space-value, @mixin-space-size, @mixin-space-device) {
@mixin-space-type abs(@mixin-space-value * @mixin-space-size * @mixin-space-device);
}
// The following media queries beloow generates different types of padding sizes.
// Top: .pad-top-s, .pad-top-m, .pad-top-l, .pad-top-xl
// Right: .pad-right-s, .pad-right-m, .pad-right-l, .pad-right-xl
// Left: .pad-left-s, .pad-left-m, .pad-left-l, .pad-left-xl
// Bottom: .pad-bottom-s, .pad-bottom-m, .pad-bottom-l, .pad-bottom-xl
// The following media queries beloow generates different types of margin sizes.
// Top: .mar-top-s, .mar-top-m, .mar-top-l, .mar-top-xl
// Right: .mar-right-s, .mar-right-m, .mar-right-l, .mar-right-xl
// Left: .mar-left-s, .mar-left-m, .mar-left-l, .mar-left-xl
// Bottom: .mar-bottom-s, .mar-bottom-m, .mar-bottom-l, .mar-bottom-xl
@media (max-width: @screen-xs-max) {
.lg-md-content-margin {
margin-top: 0px;
}
.pad {
&-top {
&-s {
.mixin-space(@space-type-padding-top, @base-top-space, @space-small, @space-xs);
}
&-m {
.mixin-space(@space-type-padding-top, @base-top-space, @space-medium, @space-xs);
}
&-l {
.mixin-space(@space-type-padding-top, @base-top-space, @space-large, @space-xs);
}
&-xl {
.mixin-space(@space-type-padding-top, @base-top-space, @space-xlarge, @space-xs);
}
}
&-bot {
&-s {
.mixin-space(@space-type-padding-bottom, @base-bottom-space, @space-small, @space-xs);
}
&-m {
.mixin-space(@space-type-padding-bottom, @base-bottom-space, @space-medium, @space-xs);
}
&-l {
.mixin-space(@space-type-padding-bottom, @base-bottom-space, @space-large, @space-xs);
}
&-xl {
.mixin-space(@space-type-padding-bottom, @base-bottom-space, @space-xlarge, @space-xs);
}
}
&-right {
&-s {
.mixin-space(@space-type-padding-right, @base-right-space, @space-small, @space-xs);
}
&-m {
.mixin-space(@space-type-padding-right, @base-right-space, @space-medium, @space-xs);
}
&-l {
.mixin-space(@space-type-padding-right, @base-right-space, @space-large, @space-xs);
}
&-xl {
.mixin-space(@space-type-padding-right, @base-right-space, @space-xlarge, @space-xs);
}
}
&-left {
&-s {
.mixin-space(@space-type-padding-left, @base-left-space, @space-small, @space-xs);
}
&-m {
.mixin-space(@space-type-padding-left, @base-left-space, @space-medium, @space-xs);
}
&-l {
.mixin-space(@space-type-padding-left, @base-left-space, @space-large, @space-xs);
}
&-xl {
.mixin-space(@space-type-padding-left, @base-left-space, @space-xlarge, @space-xs);
}
}
}
.mar {
&-top {
&-s {
.mixin-space(@space-type-margin-top, @base-top-space, @space-small, @space-xs);
}
&-m {
.mixin-space(@space-type-margin-top, @base-top-space, @space-medium, @space-xs);
}
&-l {
.mixin-space(@space-type-margin-top, @base-top-space, @space-large, @space-xs);
}
&-xl {
.mixin-space(@space-type-margin-top, @base-top-space, @space-xlarge, @space-xs);
}
}
&-bot {
&-s {
.mixin-space(@space-type-margin-bottom, @base-bottom-space, @space-small, @space-xs);
}
&-m {
.mixin-space(@space-type-margin-bottom, @base-bottom-space, @space-medium, @space-xs);
}
&-l {
.mixin-space(@space-type-margin-bottom, @base-bottom-space, @space-large, @space-xs);
}
&-xl {
.mixin-space(@space-type-margin-bottom, @base-bottom-space, @space-xlarge, @space-xs);
}
}
&-right {
&-s {
.mixin-space(@space-type-margin-right, @base-right-space, @space-small, @space-xs);
}
&-m {
.mixin-space(@space-type-margin-right, @base-right-space, @space-medium, @space-xs);
}
&-l {
.mixin-space(@space-type-margin-right, @base-right-space, @space-large, @space-xs);
}
&-xl {
.mixin-space(@space-type-margin-right, @base-right-space, @space-xlarge, @space-xs);
}
}
&-left {
&-s {
.mixin-space(@space-type-margin-left, @base-left-space, @space-small, @space-xs);
}
&-m {
.mixin-space(@space-type-margin-left, @base-left-space, @space-medium, @space-xs);
}
&-l {
.mixin-space(@space-type-margin-left, @base-left-space, @space-large, @space-xs);
}
&-xl {
.mixin-space(@space-type-margin-left, @base-left-space, @space-xlarge, @space-xs);
}
}
}
}
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
// redo the whole process and changing some global variables
}
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
// redo the whole process and changing some global variables
}
@media (min-width: @screen-lg-min) {
// redo the whole process and changing some global variables
}
Inscription à :
Commentaires (Atom)