I've learned how to create a jquery ui tab, thanks to http://jqueryui.com/tabs, and customized the look of it. I've been searching the web on how to highlight a selected tab by changing it's background color when someone clicks on it. So far, it's been frustrated and unsuccessful.
Here's the HTML Code Use:
<!DOCTYPE html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" >
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js"></script>
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
<title>Jquery Tab Test</title>
</head>
<body>
<div id="tab-wrapper">
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<br class="clearboth" />
<div id="tabs1" class="tab-content">
Content 1
</div>
<div id="tabs2" class="tab-content">
Content 2
</div>
<div id="tabs3" class="tab-content tabs3">
Content 3
</div>
</div>
</div>
</body>
and CSS:
body, html {
height: 101%;
}
body {
font-family: arial;
}
.clearboth {
clear: both;
padding: 0;
margin: 0;
}
#tab-wrapper {
background-color: #f00fff;
border: solid 1px #909090;
padding: 5px;
width: 330px;
}
#tabs {
overflow: hidden;
}
#tabs ul li,
#tabs ul {
margin: 0;
padding: 0;
list-style: none;
}
#tabs ul a {
float: left;
padding: 5px;
display: block;
width: 100px;
text-align: center;
text-decoration: none;
color: #000000;
height: 20px;
line-height: 20px;
font-size: 10pt;
font-weight: bold;
background-color: #cccccc;
}
#tabs ul a:hover {
background-color: #f1f1f1;
}
#tabs .tab-content {
padding: 5px;
display: block;
background-color: #f1f1f1;
font-size: 10pt;
height: 300px;
border-top: solid 1px #000000;
}
Please help if anyone can.
Jquery assigns the selected tab the class="ui-tabs-active" so to style it simply hook your css into it as follows:
#tabs .ui-tabs-active {
background: yellow;
}
This works for me:
#tabs .ui-tabs-active {
background: yellow;
}
but the above answer did not - the order in the css file is important - the above is after hover.
Related
I've just started some days ago working with JQuery UI to allow some drag and drop and sorting on my homepage. In the code shown below, i wanted to add "+" and "-" to correct the equation "1_2_3=6", so the "+" has to been dropped two times to make the equation correct.
At the moment, it nearly works perfect. I can add as many "+" and "-" as I want, I can sort them into the equation. The only problem is, that I cannot remove any "+" or "-".
Can you give me any hint, how to be able to remove the signs by moving them out of the sortable window?
Thanks for your help!
<html>
<head>
<style>
#draggable { list-style-type: none; margin: 0; padding: 0; }
#draggable li { display: inline-block; margin: 1%; padding: 1%; font-size: 10vw; text-align:center; min-width:20px; border-style: solid; border-width: medium; border-color:black; background-color:grey;}
#sortable { float:left; list-style-type: none; width:100%; }
#sortable li { display: inline-block; margin: 0; padding: 0; font-size: 10vw; text-align:center; min-width:20px;}
</style>
<script src="jquery-1.12.4.js"></script>
<script src="jquery-ui.min.js"></script>
<script>
$( function() {
$( ".clone").draggable({
cursor:"move",
revert: "invalid",
connectToSortable: '#sortable',
helper: 'clone'
});
$( "#sortable").sortable({
connectWith: "ul",
cancel: ".ui-state-disabled",
});
} );
</script>
</head>
<body>
<ul id="draggable">
<li class="clone">+</li>
<li class="clone">-</li>
</ul>
<ul id="sortable">
<li class="ui-state-disabled">1</li>
<li class="ui-state-disabled">2</li>
<li class="ui-state-disabled">3=6</li>
</ul>
</body>
</html>
You can create a div when the UI components are dropped into the div you can remove the dropped component.
Sample code.
//HTML
<div class="removeDiv">
<p>Drop to remove</p>
</div>
//Style
.removeDiv{
width:100px;
height:100px;
background-color:red;
margin-top:150px;
}
//Script
$('.removeDiv').droppable({
over: function(event, ui) {
ui.draggable.remove();
}
});
This should get your work done.
Here's a fiddle for the above code. JS Fiddle
Expanding on my comment. Your code may look something like this.
$(function() {
$(".clone").draggable({
cursor: "move",
revert: "invalid",
connectToSortable: '#sortable',
helper: 'clone'
});
$("#sortable").sortable({
connectWith: "ul",
cancel: ".ui-state-disabled",
});
$(".trash").droppable({
accept: "#sortable > li",
classes: {
"ui-droppable-hover": "ui-state-highlight"
},
drop: function(event, ui) {
deleteItem(ui.draggable);
}
});
function deleteItem($o) {
$o.fadeOut().remove();
}
});
#draggable {
list-style-type: none;
margin: 0;
padding: 0;
}
#draggable li {
display: inline-block;
margin: 1%;
padding: 1%;
font-size: 10vw;
text-align: center;
min-width: 20px;
border-style: solid;
border-width: medium;
border-color: black;
background-color: grey;
}
#sortable {
list-style-type: none;
width: 100%;
}
#sortable li {
display: inline-block;
margin: 0;
padding: 0;
font-size: 10vw;
text-align: center;
min-width: 20px;
}
.trash {
width: 50px;
height: 50px;
border: 1px solid #000;
border-radius: 6px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="drag-items" style="display: block;">
<ul id="draggable">
<li class="clone">+</li>
<li class="clone">-</li>
</ul>
</div>
<div class="problem" style="display: block;">
<ul id="sortable">
<li class="ui-state-disabled">1</li>
<li class="ui-state-disabled">2</li>
<li class="ui-state-disabled">3=6</li>
</ul>
</div>
<div class="trash">
<span class="ui-icon ui-icon-trash"></span>
</div>
In this code, add a small section for items to be dragged to and when they are dropped, they are removed. Also has visual feedback.
I'm using a template found https://bootstrapious.com/p/bootstrap-sidebar (it's the 2nd sidebar option). I have it integrated into a stock MVC5 application and everything works except for whatever is in RenderBody(), it's not responsive to when the sidebar is toggled open/closed. It is responsive when I resize the page, and the sidebar responds appropriately too, but I don't want the sidebar to overlay the contents on RenderBody(). How would I go about fixing that? Thank you in advanced!
_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<!-- Scrollbar Custom CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css">
</head>
<body>
<div class="wrapper">
<!-- Sidebar Holder -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Bootstrap Sidebar</h3>
</div>
<ul class="list-unstyled components">
<p>Dummy Heading</p>
<li class="active">
Home
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>Home 1</li>
<li>Home 2</li>
<li>Home 3</li>
</ul>
</li>
<li>
About
Pages
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
</nav>
<!-- Page Content Holder -->
<div id="content">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn">
<i class="glyphicon glyphicon-align-left"></i>
<span>Toggle Sidebar</span>
</button>
</div>
<!--
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Page</li>
<li>Page</li>
<li>Page</li>
<li>Page</li>
</ul>
</div>-->
</div>
</nav>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
<!-- jQuery Custom Scroller CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#sidebar").mCustomScrollbar({
theme: "minimal"
});
$('#sidebarCollapse').on('click', function () {
$('#sidebar, #content').toggleClass('active');
$('.collapse.in').toggleClass('in');
$('a[aria-expanded=true]').attr('aria-expanded', 'false');
});
});
</script>
</body>
</html>
Site.css
#import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
background: #fafafa;
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a, a:hover, a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
#sidebar {
width: 250px;
position: fixed;
top: 0;
left: 0;
height: 100vh;
z-index: 999;
background: #367fa9;
color: #fff;
transition: all 0.3s;
}
#sidebar.active {
margin-left: -250px;
}
#sidebar .sidebar-header {
padding: 20px;
background: #3c8dbc;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #367fa9;
background: #fff;
}
#sidebar ul li.active > a, a[aria-expanded="true"] {
color: #fff;
background: #3c8dbc;
}
a[data-toggle="collapse"] {
position: relative;
}
a[aria-expanded="false"]::before, a[aria-expanded="true"]::before {
content: '\e259';
display: block;
position: absolute;
right: 20px;
font-family: 'Glyphicons Halflings';
font-size: 0.6em;
}
a[aria-expanded="true"]::before {
content: '\e260';
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #3c8dbc;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
width: calc(100% - 250px);
padding: 40px;
min-height: 100vh;
transition: all 0.3s;
position: absolute;
top: 0;
right: 0;
}
#content.active {
width: 100%;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
#media (max-width: 768px) {
#sidebar {
margin-left: -250px;
}
#sidebar.active {
margin-left: 0;
}
#content {
width: 100%;
}
#content.active {
width: calc(100% - 250px);
}
#sidebarCollapse span {
display: none;
}
}
Is there an event that I can listen to, when Flickity has finished initialization?
When initializing with JavaScript, I can trigger an event by myself, but by using this setup I have no clue.
Initialize with HTML
http://flickity.metafizzy.co/#initialize-with-html
<div data-flickity='{ … }'>
…
</div>
Currently, I am checking if Flickity has generated it's DOM elements, but that is not very elegant. :-)
You can try this:
Flickity.prototype.on( 'activate',function(){
alert("active")});
Flickity.prototype.on( 'activate',function(){
alert("active")});
/* external css: flickity.css */
* { box-sizing: border-box; }
body { font-family: sans-serif; }
.carousel {
background: #EEE;
}
.carousel-cell {
width: 100%;
height: 200px;
margin-right: 10px;
background: #8C8;
border-radius: 5px;
counter-increment: gallery-cell;
}
/* cell number */
.carousel-cell:before {
display: block;
text-align: center;
content: counter(gallery-cell);
line-height: 200px;
font-size: 80px;
color: white;
}
<script src="https://npmcdn.com/flickity#2/dist/flickity.pkgd.js"></script>
<!-- Flickity HTML init -->
<div class="carousel" id="carousel" data-flickity>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
</div>
So I'm trying to make a website with two different links- however, the CSS that I'm editing them with recognizes them both as "a" and puts them in the same spot. This is aggervating, I've tried basing the css off of the they're in, but that doesn't seem to be working. Here's my code:
<html>
<h1>
<div id = "firstbutton">
GOOGLE
<style type="text/css">
a {
color: rgb(255,255,255);
font-size: 60;
font-family: Arial;
text-decoration: none;
position: fixed;
top: 50%;
left: 50%;
margin-top: -85px;
margin-left: -145px;
}
</style>
</div>
<div id = "forumbutton">
Forum
<style type="text/css">
a{
color: rgb(255,255,255);
font-size: 30;
font-family: Calibri;
position: fixed;
text-decoration: none;
top: 50%;
left: 50%;
margin-top: 260px;
margin-left: -45px;
}
</style>
</div>
</h1>
<body>
<audio src="goingdown.mp3" autoplay></audio>
<style type="text/css">
body {
background-image: url('spacewallpaper.jpg');
}
</style>
</body>
</html>
Set ID for each a element
Then css should look like:
a#name1{ ... }
a#name2{ ... }
This is where classes come in handy. You should add a class attribute to each a and define your CSS with that class. Or you could use an ID.
Styles can get overridden with multiple style blocks or declarations. It doesn't apply the the closest tag.
Here is your fixed code
JS Fiddle - Working
.GClass a {
color: rgb(255,255,255);
font-size: 60;
font-family: Arial;
text-decoration: none;
position: fixed;
top: 50%;
left: 50%;
margin-top: -85px;
margin-left: -145px;
}
.FClass a{
color: rgb(255,255,255);
font-size: 30;
font-family: Calibri;
position: fixed;
text-decoration: none;
top: 50%;
left: 50%;
margin-top: 260px;
margin-left: -45px;
}
<html>
<h1>
<div id = "firstbutton">
GOOGLE
</div>
<div id = "forumbutton">
Forum
</div>
</h1>
<body>
<audio src="goingdown.mp3" autoplay></audio>
<style type="text/css">
body {
background-image: url('spacewallpaper.jpg');
}
</style>
</body>
</html>
You should set and ID for each element you are trying to add (implement), then you can call that element easily inside the CSS.
Also Element div cannot be nested inside element h1!
The font-size should be marked in pixels. Example font-size: 30px;.
The structure of your document is slightly scattered...
it is better to put all your styles in the head section an not scattered through the body section
<html>
<head>
<style type="text/css">
body
{
background-image: url('spacewallpaper.jpg');
}
a
{
color: #FFFFFF;
text-decoration: none;
top: 50%;
left: 50%;
}
.FirstLink
{
font-size: 60;
font-family: Arial;
position: fixed;
margin-top: -85px;
margin-left: -145px;
}
.SecondLink
{
font-size: 30;
font-family: Calibri;
position: fixed;
margin-top: 260px;
margin-left: -45px;
}
</style>
</head>
<body>
<h1>
<div id = "firstbutton">
<a class="FirstLink" href="http://google.com">GOOGLE</a>
</div>
<div id = "forumbutton">
<a class="SecondLink" href="http://www.google.com">Forum</a>
</div>
</h1>
<audio src="goingdown.mp3" autoplay></audio>
</body>
</html>
Try the code above and compare it to your own for reference to see the differences. Good luck.
http://tinypic.com/r/hrbfic/5
Hello i got problem with my footer. The main section is overlapping my footer. Main section position is relative and footer position is absolute. I dont want my footer position to be fixed. Any ideas? Thanks.
html
{
margin: 0px;
padding: 0px;
border: 0px none;
outline: 0px none;
font-size: 100%;
background: none repeat scroll 0% 0% transparent;
}
body
{
background-image: url('/images/tlo.png');
background-repeat:repeat;
font-family: Tahoma,Verdana,Arial;
font-size: 100%;
height:100%;
}
h1, .leg
{
font-size:12px;
color: orange;
text-align:center;
}
h2
{
font-size:12px;
color: orange;
text-align:left;
}
p
{
color: white;
margin-top: .5em;
font-size: .75em;
padding-left:1%;
padding-right:1%;
}
.right
{
color: white;
margin-top: .5em;
font-size: .75em;
padding-left:5%;
text-align:right;
font-style:oblique;
}
#top
{
padding-top:60px;
padding-bottom:20px;
height:auto;
width:1024px;
overflow:hidden;
margin: 0px auto;
}
nav
{
border-width: thin;
border:1px solid gray;
background-image: url('/images/tweed.png');
}
header
{
background-image: url('/images/tlo.png');
}
#div1,#div2,#div3,#div4,#div5
{
position:relative;
padding:30px;
min-height:100%;
height:auto;
width:1024px;
background-image: url('/images/podklad.png');
border-width: thin;
border:1px solid gray;
margin:0px auto;
margin-top:20px;
margin-bottom:20px;
}
#menu
{
position:relative;
text-align: center;
height:120px;
width:100%;
margin: 0px auto;
border:0px;
font-size:0px;
background-image:url('/images/podklad.png');
background-repeat:repeat;
}
#stopka
{
position:absolute;
bottom:0px;
left:0px;
width:100%;
height:100px;
background-image:url('/images/podklad.png');
background-repeat:repeat;
margin: 0px auto;
}
ul.lista
{
text-align:center;
list-style-type:none;
margin:0;
}
ul#jezyki
{
list-style: circle;
color: white;
margin-top: .5em;
font-size: .75em;
text-align:center;
}
li.lista
{
display:inline;
margin: 0px auto;
}
.linki
{
font-size:14px;
color:white;
font-weight:bold;
}
.clear {
display:block;
float:none;
clear:both;
height:0px;
width:100%;
margin:0;
padding:0;
border:0;
}
?>
<!doctype html>
<head>
<title>Damian Pruszynski Webdesign</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<link href='http://fonts.googleapis.com/css?family=Habibi' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="sliding_effect.js"></script>
<script type="text/javascript" src="mojefunkcje.js"></script>
<meta name="keywords" content="Damian Pruszynski, webdesign, bialystok webdesign, strony www, programowanie bialystok, pisanie stron www, pisanie stron www bialystok, robienie stron www bialystok, robienie stron" />
<meta name="description" content="Damian Pruszynski - strona domowa, programowanie i webdesign. Programowanie stron www - HTML5 CSS3 jQuery. Skrypty PHP5 Javascript. Bannery oraz grafiki promujące. Łatwo tanio i przyjemnie."/>
<meta name="author" content="Damian Pruszyński"/>
<meta name="robots" content="index,follow" />
<meta charset="UTF-8"/>
</head>
<body>
<header>
<div id="toppodklad"></div>
<div id="top">
<img src="/images/logotop.png" alt="logo glowne" />
</div>
</header>
<nav>
<div id="menu">
<ul class="lista">
<li class="lista"><a id="pokaz1" href="index.php" ><img src="/images/pasek_01.png" alt=" " /></a></li>
<li class="lista"><a id="pokaz2" href="autor.php" ><img src="/images/pasek_02.png" alt=" " /></a></li>
<li class="lista"><a id="pokaz3" href="projekty.php" ><img src="/images/pasek_03.png" alt=" " /></a></li>
<li class="lista"><a id="pokaz4" href="kontakt.php" ><img src="/images/pasek_04.png" alt=" " /></a></li>
<li class="lista"><a id="pokaz5" href="logowanie.php" ><img src="/images/pasek_05.png" alt=" " /></a></li>
</ul>
</div>
</nav>
<div id="container">
<div id="div1">
<?php
include("newsy.php");
?>
</div>
</div>
<div id="stopka"></div>
</body>
</html>
use (clear:both;) in css hope it helps