css

Using Less, can I use the current value in a @media section?

I have the following Less code: @appbar-padding: 10px; .container { padding-bottom: @appbar-padding + 10; } @media (min-width: 750px) { .container { padding-bottom: @appbar-padding + 20; } } Is it possible to take the current value of the padding-bottom in the @media part? So I could do something like: @media (min-width: 750px) { .container { padding-bottom: @this + 10; } }…
Read more

CSS not getting included in sub directories

I have the following directory structure: I have put up a header which is going to come across all my webpages and the content is in header.html. header.html: <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap Case</title> <meta charset=”utf-8″></meta> <meta name=”viewport” content=”width=device-width, initial-scale=1″></meta> <link rel=”stylesheet” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css”></link> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script> <script src=”http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js”></script> <link rel=”stylesheet” href=”css/custom_styles.css”></link> <script> $(document).ready(function() { var pathname = this.location.pathname; if( pathname.indexOf(…
Read more

bootstrap handling long tabs

See the plunkr here: http://plnkr.co/edit/2WrJSzTeE3AkQD9dX6kF?p=preview The tabs are wrapping into multiple lines. In my app I need to create the tabs dynamically, so user can create n tabs by clicking some button ‘Add Tab’. The issue is once the tabs increased the length of container it splits to multiple lines and does not looks good, how to fix this issue?…
Read more

How to delete a specific slide from bootstrap carousel using JQuery

I am new to bootstrap. Basically in my Carousel, in some slides I have the Decline button. enter link description hereOnclick of which I want to delete/remove that slide and navigate to the next slide. Is it possible using JQuery? I was trying something similar here in JSFiddle: Thank you very much in advance. Source: css

How to Create A Horizontal ScrollBar in Tab Container (Not Vertical Scrollbar)

I would like to create a horizontal scrollbar for Ajax Tab Container when tabs overflow. I can create a vertical scrollbar for it but I want horizontal scrollbar instead. Current Output: Plan to Achieve: This is my codes: <script src=”http://code.jquery.com/jquery-1.9.1.js”></script> <script> $(function () { $(“.ajax__tab_header”).html(“<div style=’height:80px;width:1200px;’ >” + $(“.ajax__tab_header”).html() + “</div>”); }) </script> <style> .ajax__tab_header { height: 40px !important; width:…
Read more

Change css class properties with another as dynamically

I am using bootstrap css tooltip class that defined like this: .tooltip{display:none;color:#000;text-align:left;} .tooltip.in{opacity:0.9;z-index:1030;height:auto;display:block} .tooltip.top{margin-top:-10px;text-align:center} .tooltip.top{margin-top:-10px;text-align:center} .tooltip.right{margin-left:10px} … I want to create different version of .tooltip class. Red, Blue, Orange and others. I want to create classes .red-tooltip{display:none;color:red;text-align:left;} .red-tooltip.in{opacity:0.9;z-index:1030;height:auto;display:block} .red-tooltip.top{margin-top:-8px;text-align:center} .red-tooltip.top{margin-top:-7px;text-align:center} .red-tooltip.right{margin-left:6px} .blue-tooltip{display:none;color:blue;text-align:left;} .blue-tooltip.in{opacity:0.9;z-index:1030;height:auto;display:block} .blue-tooltip.top{margin-top:-18px;text-align:center} .blue-tooltip.top{margin-top:-27px;text-align:center} .blue-tooltip.right{margin-left:6px} How can I dynamically change .tooltip content with .blue-tooltip Can I do this via…
Read more

fetch data from database and display in dropdownlist

i am trying to fetch a data from my database and display it in my dropdownlist but i cant get the result i try the other post here but cant understand anyone can help me with this plssss this is for my project <?php $connection =mysqli_connect(‘localhost’, ‘root’, ”,’mjj_app’); $sql=”SELECT food FROM menu”; $lists=mysql_query($sql); echo”<select name=’fname’ id=’mySelect’ value=’Foodname’>” while($food = mysql_fetch_array($lists))…
Read more

Javascript – Click list element to load HTML page animation

Javascript novice here. I am working on a piece of code provided here – http://codepen.io/mariusbalaj/pen/beALH/ I’m trying to modify the behavior so that instead of just zooming in the list element when clicked, it should load a different html page completely. $(document).ready(function() { var $box = $(‘.box’); $(‘.metro li’).each(function() { var color = $(this).css(‘backgroundColor’); var content = $(this).html(); $(this).click(function() {…
Read more

2 navbar without space

I want to make something like this When I made 2 navbar, there is a white gap separating them, how to remove this gap? I’ve read somewhere that if I change the size of the navbar’s elements will automatically increase its height , but it didn’t work out. If I need to make a custom class for a navbar, what…
Read more