Is it possible to improve my code and make it more simpler.
Iam in code trying to right and left-align the image with margin.
if(alig =="left")
{
<div style="float:left; margin-right:10px;">Heeeeej</div>
<div style="float:left">AAAan</div> ------> !align =left margin-right:10px;
}
else
{
<div style="float:right; ">Heeeeej</div>
<div style="float:left; margin-right:10px;">Aaaaaan</div>
}
You can just use the variable in the css style directly which would look like:
<div style="float:#(alig); margin-right:10px;">Heeeeej</div>
<div style="float:#(alig)">AAAan</div>
I am supposing that the align variable will have either left or right as value in it.
You could use class names to distinguish styles (and pull inlined styles out of HTML tags):
<div #if(alig == "left") { <text>class="left-align"</text> }>
<div class="first-div">Heeeeej</div>
<div class="second-div">AAAan</div>
</div>
And, in either a referenced CSS file or in an inline <style> tag:
.first-div
{
float:right;
}
.second-div
{
float:left;
margin-right:10px;
}
//this behavior will supercede the above behavior when .left-align is on an ancestor
.left-align .first-div
{
float:left;
margin-right:10px;
}
.left-align .second-div
{
float:left
margin-right:auto;
}
Related
I would like to change the size of some bootstrap offcanvas elements. (not all!)
(To change all, I know I can change the SASS-Varianble ($offcanvas-horizontal-width: 400px))
I would like to make this work in a way that I have different CSS classes that I can add to the offcanvas (like the modal with .modal-xl).
I.e. here e.g. .offcanvas-size-l and .offcanvas-size-xl
Of course, the offcanvas should also remain responsive (i.e. not go beyond 100vw for narrower screens. (i.e. with max-width / media-query).
Unfortunately, this is not feasible only simply with a width specification, because bootstrap work in addition to width with corrosponding negative margin which push the offcanvas "out of screen" I.e. that are several values that must be adjusted.
Since I "compile" bootstrap itself via Sass, I have a more Options and can insert before and after the (s)css any parts/SASS functions. (or edit bootstrap source)
Has anyone been able to make this work?
I don't need the "responsive-offcanvas" function (offcanvas-xl) which is new in 5.2 /an does something complete different.
Example code (Directly from the bootstrap page, only "offcanvas-size-xl" added)
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
Toggle static offcanvas
</button>
<div class="offcanvas offcanvas-start offcanvas-size-xl" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="staticBackdropLabel">Offcanvas</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div>
I will not close if you click outside of me.
</div>
</div>
</div>
In the end it was easier than I thought, there is also a CSS variable that you can influence (mit SASS):
.offcanvas-size-xl {
--#{$prefix}offcanvas-width: min(95vw, 600px) !important;
}
.offcanvas-size-xxl {
--#{$prefix}offcanvas-width: min(95vw, 90vw) !important;
}
.offcanvas-size-md { /* add Responsivenes to default offcanvas */
--#{$prefix}offcanvas-width: min(95vw, 400px) !important;
}
.offcanvas-size-sm {
--#{$prefix}offcanvas-width: min(95vw, 250px) !important;
}
For those who do not compile bootstrap, they should be able to do so:
.offcanvas-size-xl {
--bs-offcanvas-width: min(95vw, 600px) !important;
}
.offcanvas-size-xxl {
--bs-offcanvas-width: min(95vw, 90vw) !important;
}
.offcanvas-size-md { /* add Responsivenes to default offcanvas */
--bs-offcanvas-width: min(95vw, 400px) !important;
}
.offcanvas-size-sm {
--bs-offcanvas-width: min(95vw, 250px) !important;
}
<div class='parent'>
<div class='children'>1234</div>
<div class='children'>5678</div>
<div class='children'>9101</div>
<div class='children'>I WANT TO BE FIRST</div>
</div>
js
$('.parent').sortable({
axis: "y",
containment: "parent"
});
There is a problem dragging an element to the first position if containment is set to parent. I need this settings but I also need to move some elements to the top. But it seams that there is no space enough to do it. Sometimes it is possible but mainly - it's not.
I tried with adding top/bottom padding/margin to the parent - without success.
Any workaround?
Here is jsfiddle
you can try adding a 'hidden' element above, like so:
<div class='parent'>
<div class='children hidden'></div>
<div class='children'>1234</div>
<div class='children'>5678</div>
<div class='children'>9101</div>
<div class='children'>I WANT TO BE FIRST</div>
</div>
with this for css:
.hidden {
visibility: hidden;
height: 0;
}
It won't release if dragged above the invisible element though.
here's a jsfiddle
Can you add a containing div and set the containment to it? e.g.:
<div id="outer">
<div class='parent'>
<div class='children'>1234</div>
<div class='children'>5678</div>
<div class='children'>9101</div>
<div class='children'>I WANT TO BE FIRST</div>
</div>
</div>
along with:
$('.parent').sortable({
axis: "y",
containment: "#outer"
});
and
#outer {
padding-top: 1px;
}
That seemed to work with the fiddle.
I am using jquery-mobile, and I have these two buttons:
<p id="propart">Pro:
<select id="chosenpro" data-inline="true"></select>
<button type="button" id="resetbutton" data-inline="true" data-theme="w">Reset</button>
</p>
I would like them to be displayed side by side (inline).
But I can't figure it out. I did this but it doesn't work. Can you help ?
Here is my css:
#propart .ui-select {
width:75%;
}
#propart .ui-select .ui-btn-icon-right {
width:100%;
}
#propart .ui-btn {
width:25%;
}
Use ui-grid classes, and override their width.
Demo
Markup
<div class=ui-grid-a>
<div class=ui-block-a>button 1</div>
<div class=ui-block-b>button 2</div>
</div>
CSS
.ui-block-a { width: 75% !important; }
.ui-block-b { width: 25% !important; }
There is no need to define any css rules.
jqm has Layout grids
All you need to do is:
<div class=ui-grid-a>
<div class=ui-block-a> <select id="chosenpro" data-inline="true"></select></div>
<div class=ui-block-b><button type="button" id="resetbutton" data-inline="true" data-theme="w">Reset</button></div>
</div>
I am trying to select only the outer container for the drop target with jQuery UI.
I am trying to drop in media-content but not in media-list-items.
The reason is that media-list-items is not the full width of it's parent and I only want to drop to the right side which is a different background color the full height.
HTML:
<div class="media-content clearfix ui-droppable on" style="">
<form method="post" class="form-horizontal" action="./">
<fieldset>
<div class="media-list-items clearfix">
<ul data-gallery_id="18" class="media-list ui-sortable" style="">
<li id="media_17"></li>
<li id="media_15"></li>
</ul>
</div>
</fieldset>
</form>
</div>
JS:
var $trash = $('.media-content:not(.media-list-items), .media-content');
$trash.droppable({
accept: '.media-list > li',
drop: function(event, ui) {
console.log('trashed');
}
});
I'm not sure you can achieve what you want without adding another element as your "trash" droppable. With some neat css you can make it look pretty much the same :)
html
<div class="media-content">
<form method="post" class="form-horizontal" action="./">
<fieldset>
<div class="trash"></div> <!-- added a trash element -->
<div class="media-list-items">
<ul class="media-list">
<li id="media_25"></li>
<li id="media_26"></li>
<li id="media_27"></li>
</ul>
</div>
</fieldset>
</form>
</div>
css
.media-content {
position: relative; /* makes it contain absolutely positioned descendants */
}
.media-content .trash {
position: absolute;
top: 0; bottom: 0; /* stretches to full height of .media-content */
right: 0;
width: 100px;
background:#f5f5f5;
}
js
$('.media-content .trash').droppable({
drop: function(event, ui) {
console.log('trashed');
}
});
Demo at: http://jsfiddle.net/KazeG/6/
I have got a category - model which i am using it for my eCommerce system , I have a fixed background image for each category added , What i want to achieve is to programatically add different background image for each category added. Below is the code , currently i am adding images through css.
#using Nop.Web.Models.Catalog;
#if (Model.Count > 0)
{
<div class="home-page-category-grid">
#(Html.DataList<CategoryModel>(Model, 5,
#<div class="item-box">
<div class="category-item"> #*Thats where i am adding background-images in the class category-item*#
<h2 class="title">
<a href="#Url.RouteUrl("Category", new { categoryId = item.Id, SeName = item.SeName })" title="#item.PictureModel.Title">
#item.Name</a>
</h2>
<div class="picture">
<a href="#Url.RouteUrl("Category", new { categoryId = item.Id, SeName = item.SeName })" title="#item.PictureModel.Title">
<img style="border-width: 0px;" alt="#item.PictureModel.AlternateText" src="#item.PictureModel.ImageUrl"
title="#item.PictureModel.Title" /></a>
</div>
</div>
</div>
))
</div>
<div class="home-page-category-grid-separator"></div>
}
Css for Category -Item
.home-page-category-grid .category-item
{
text-align: center;
margin: 10px 0px 35px 4px; /*width: 150px;*/
width: 166px;
height: 185px;
background: url('images/picture-bg.png') no-repeat 0 100%;
}
Any suggestions or alternatives will be highly appreciated , i just need to add different background images for each category items , At present the background image is fixed in the category-item class used by datalist.
You can do this if you have the stylesheet definition in your view, not in an css file. Css files are, basicly, static files like html. If you want to get some dynamic things to that you have to do it in server side code. Maybe confusing what i say.. but check my sample and you understand what i mean.... i hope ;)
// Your View
<style>
body
{
background-image: url('#ViewBag.ImagePath');
}
</style>
// your action method
public ActionResult ActionName()
{
ViewBag.ImagePath = "<path to your image">
return View();
}
I would just use multiple CSS classes, one for the general background image styles and then an individual one for each of the categories that just has the specific background-image style set with the correct image reference.
something like this:
#using Nop.Web.Models.Catalog;
#if (Model.Count > 0)
{
<div class="home-page-category-grid">
#(Html.DataList<CategoryModel>(Model, 5,
#<div class="item-box">
<div class="category-item category-#item.Id"> #*Thats where i am adding background-images in the class category-item*#
<h2 class="title">
<a href="#Url.RouteUrl("Category", new { categoryId = item.Id, SeName = item.SeName })" title="#item.PictureModel.Title">
#item.Name</a>
</h2>
<div class="picture">
<a href="#Url.RouteUrl("Category", new { categoryId = item.Id, SeName = item.SeName })" title="#item.PictureModel.Title">
<img style="border-width: 0px;" alt="#item.PictureModel.AlternateText" src="#item.PictureModel.ImageUrl"
title="#item.PictureModel.Title" /></a>
</div>
</div>
</div>
))
</div>
<div class="home-page-category-grid-separator"></div>
See how I added category-#item.Id to that same class declaration? You can also use something more semantic like the category name if you've got one, etc. Then you can do this in the CSS:
.home-page-category-grid .category-item
{
text-align: center;
margin: 10px 0px 35px 4px; /*width: 150px;*/
width: 166px;
height: 185px;
}
.home-page-category-grid .category-item .category-1
{
background: url('images/picture-bg-1.png') no-repeat 0 100%;
}
.home-page-category-grid .category-item .category-2
{
background: url('images/picture-bg-2.png') no-repeat 0 100%;
}
There are some other alternatives as well, specifically if you don't know the image url until the loop executes... in which case I would just use a style attribute with a value of background-image:url(#item.BackgroundImage).
Using samandmoore's answer, you can also do this entirely in the View, with the source of the image based on the requested URL (using #Request.RawUrl):
<div class="parallax bg-image-#Request.RawUrl.Replace('/', '-')" >
<section class="page-title">
<div class="container">
<h2>#Html.Raw(ViewBag.Title)</h2>
</div>
</section>
</div>