I want to select a tab on clicking a link. I tried using different online available solutions (including $('ul.tabs').tabs('select_tab', 'tab_id');) but none seems to be work with current materialize version. The official documentation for materialize states to do the initialization using var instance = M.Tabs.init(el, options); instance.select('tab_id'); but none of the methods seem to work correctly with current version or has been clearly specified w.r.t Materialize Tabs.
Any help is greatly appreciated. Below is the code snippet along with jsfiddle link,
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
<!--
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
-->
<script>
$(document).ready(function() {
$('ul.tabs').tabs();
$("#btnContinue").click(function() {
$('ul.tabs').tabs('select_tab', 'test2');
});
});
/* var instance = new M.Tabs.init(el, options);
function check_active(){
var instance = M.Tabs.getInstance(elem);
instance.select('test2');
} */
</script>
</head>
<body>
<div class="col s12">
<ul class="tabs">
<li class="tab col s4">tab1
</li>
<li class="tab col s4">tab2
</li>
<li class="tab col s4">tab3
</li>
</ul>
</div>
<div id='test1' class="col s12">
<!--<a id="btnContinue" href='#test2' onclick="check_active();">continue</a>-->
<a id="btnContinue" href='#test2'>continue</a>
</div>
<div id='test2' class="col s12"></div>
</body>
</html>
JSFiddle Link for the same: https://jsfiddle.net/chirag_cyber/6evpqcfb/6/
You should change
$('ul.tabs').tabs('select_tab', 'test2');
to :
$('ul.tabs').tabs('select', 'test2');
select shows tab content that corresponds to the tab with the id. JSFiddle
Related
I have previously tried materialboxed for card images and it worked.
But when I use materialboxed for carousel images the result is different, not as good as the card image.
The fixed navigation bar and any of the elements below also look different from the card image, for which all the surrounding elements are invisible.
I have tried to edit css from materialize but still can't.
<div class="carousel">
<a class="carousel-item" href="#one!"><img src="https://lorempixel.com/250/250/nature/1" class="materialboxed"></a>
<a class="carousel-item" href="#two!"><img src="https://lorempixel.com/250/250/nature/2" class="materialboxed"></a>
<a class="carousel-item" href="#three!"><img src="https://lorempixel.com/250/250/nature/3" class="materialboxed"></a>
<a class="carousel-item" href="#four!"><img src="https://lorempixel.com/250/250/nature/4" class="materialboxed"></a>
<a class="carousel-item" href="#five!"><img src="https://lorempixel.com/250/250/nature/5" class="materialboxed"></a>
</div>
the result image materialboxed in carousel
You wrote:
The navigation bar and any of the elements below also look different from the card image, for which all the surrounding elements are invisible.
Does this mean that when you are using the class materialboxed with the img tags in the carousel that the rest of the page does not become invisible/blacked-out when you click on the image?
Perhaps you have more code in your document that you did not share?
I was able to achieve the materialboxed effect in your carousel with this code:
<!DOCTYPE html>
<html>
<head>
<!-- IMPORT MATERIALIZE CSS-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
<nav>
<div class="nav-wrapper">
Logo
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>Sass</li>
<li>Components</li>
<li>JavaScript</li>
</ul>
</div>
</nav>
<div class="carousel">
<a class="carousel-item" href="#one!"><img src="https://lorempixel.com/250/250/nature/1" class="materialboxed"></a>
<a class="carousel-item" href="#two!"><img src="https://lorempixel.com/250/250/nature/2" class="materialboxed"></a>
<a class="carousel-item" href="#three!"><img src="https://lorempixel.com/250/250/nature/3" class="materialboxed"></a>
<a class="carousel-item" href="#four!"><img src="https://lorempixel.com/250/250/nature/4" class="materialboxed"></a>
<a class="carousel-item" href="#five!"><img src="https://lorempixel.com/250/250/nature/5" class="materialboxed"></a>
</div>
<!-- IMPORT MATERIALIZE JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- INIT CAROUSEL -->
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.carousel');
var instances = M.Carousel.init(elems);
});
</script>
<!-- INIT MATERIALBOXED -->
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.materialboxed');
var instances = M.Materialbox.init(elems);
});
</script>
</body>
</html>
See screen grab for result.
EDIT 2020-10-23:
Several assumptions for the following:
materialize.js is now local to the html file instead of imported from CDN. Also, the <nav> tag is now wrapped in a div with class="navbar-fixed" and id="fixed-nav":
<div id="fixed-nav" class="navbar-fixed">
<nav>
{...}
</nav>
</div>
In comments, OP clarified that he doesn't like the behavior when using materialboxed + carousel + navbar-fixed.
One solution would be to remove the class navbar-fixed from <nav>'s wrapper div when opening a carousel image and adding it back when closing.
At line 3590 and 3722 of materialize.js are the functions to open and close, respectively, an image with class materialboxed. Inside these functions, you can add the following to remove/add navbar-fixed from your wrapper with id fixed-nav:
Inside the open() function:
// remove navbar-fixed
let fixedNav = document.getElementById('fixed-nav')
fixedNav.classList.remove('navbar-fixed')
Inside the close() function:
// add navbar-fixed
let fixedNav = document.getElementById('fixed-nav')
fixedNav.classList.add('navbar-fixed')
I have read a lot of articles about how to check if the device can hover for making a good responsive design, but still no solution. I tried with media(hover:not) but it works only on Google Chrome on mobile. Can you help me? Thank you in advance.
The following demo utilizes MediaQueryList API to control the Drawer plugin at the breakpoint of 1025px (just a guess since you didn't provide any info in regards to your iPad). Details of what to remove, add, and change are commented in demo.
Basically after page loads, if the screen is > 1025px then the Drawer plugin is removed and the side menu is hidden. If it's < 1025px, then plugin is loaded and side-menu is visible. This will occur should there ever be a resizing of the screen as well.
For the touch issue I have added jQuery UI Touch Punch. You have jQuery UI loaded (although I haven't noticed it being used on your site). jQuery UI does not recognize touch events so this plugin will translate touch events into equivalent versions of the mouse events so that jQuery UI will react to touch events. Not really sure it matters if you only have mouse events registered on desktop and touch events only on mobile. If you decide that you aren't going to use jQuery UI, then use this polyfill Pointer Events jQuery which allows you to use touch, mouse, etc. pointer type events.
Demo
<!DOCTYPE html>
<html lang="bg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--|SWAP| positions of <link>s~~~~~~~~~~~~~~|BEGIN|-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css">
<link rel="stylesheet" href="style.css">
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|END|-->
<!--|ADD| media query here or in style.css|BEGIN|~~~-->
<style>
#media (min-width: 1025px) {
.drawer-toggle.drawer-hamburger { display: none !important }
}
</style>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|END|-->
<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>
<script src="https://cdn.jsdelivr.net/npm/jquery-ui-touch-punch#0.2.3/jquery.ui.touch-punch.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/js/drawer.min.js"></script>
<!--|REMOVE| this <script> tag~~~~~~~~~~~~~~~~|BEGIN|->
<script>$(document).ready(() => $('.drawer').drawer())</script>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|END|-->
<title>Счетоводна къща Елина</title>
</head>
<body class="drawer drawer--left">
<div id="wrapper" role="main">
<!--|ADD| an #id to this <div>~~~~~~~~~~~~|BEGIN|-->
<div id='mobNav' role="banner">
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|END|-->
<button type="button" class="drawer-toggle drawer-hamburger"> <span class="sr-only">toggle navigation</span>
<span class="drawer-hamburger-icon"></span>
</button>
<nav class="drawer-nav" role="navigation">
<ul class="drawer-menu">
<li><a class="drawer-brand" href="#">Начало</a></li>
<li><a class="drawer-brand" href="./services.html">Услуги</a></li>
<li><a class="drawer-menu-item" href="./accounting-services.html">Счетоводни услуги</a></li>
<li><a class="drawer-menu-item" href="./taxing-services.html">Данъчни услуги</a></li>
<li><a class="drawer-menu-item" href="./administration-of-remuneration.html">Администриране на възнаграждения</a></li>
<li><a class="drawer-menu-item" href="./others.html">Други</a></li>
<li><a class="drawer-brand" href="./prices.html">Цени</a></li>
<li><a class="drawer-brand" href="./about-us.html">За нас</a></li>
<li><a class="drawer-brand" href="./contacts.php">Контакти</a></li>
</ul>
</nav>
</div>
<!-- header -->
<header>
<img src="./images/logo.png" alt="Лого">
<nav>
<ul>
<li>Начало</li>
<li>Услуги
<ul class="dropdown">
<li>Счетоводни услуги</li>
<li>Данъчни услуги</li>
<li>Администриране на възнаграждения</li>
<li>Други</li>
</ul>
</li>
<li>Цени</li>
<li>За нас</li>
<li>Контакти</li>
</ul>
</nav>
<hr>
</header>
<!-- slider -->
<div id="slider">
<img id="left-arrow" src="./images/arrow.png" alt="left-arrow" class="controllers">
<img id="right-arrow" src="./images/arrow.png" alt="right-arrow" class="controllers">
<div id="circle-controllers-section">
<div id="0" class="circle-controllers"></div>
<div id="1" class="circle-controllers"></div>
<div id="2" class="circle-controllers"></div>
</div>
</div>
<script src="./scripts/get-content.js"></script>
<script src="./scripts/slider.js"></script>
<!-- email form -->
<form id="email-form" method="GET">
<div id="email-container">
<h2>Пишете ни</h2>
<label for="myEmail">Имейл:</label>
<input id="myEmail" type="email" name="myEmail" placeholder="Въведете имейл" required>
<label for="myName">Имена:</label>
<input id="myName" type="text" name="myName" placeholder="Въведете име и фамилия" required>
<label for="subject">Предмет:</label>
<select name="subject" required>
<option value="" disabled selected hidden>Изберете предмет</option>
<option value="Счетоводни услуги">Счетоводни услуги</option>
<option value="Данъчни услуги">Данъчни услуги</option>
<option value="Администриране на възнаграждения">Администриране на възнаграждения</option>
<option value="Друго">Друго</option>
</select>
<label for="message">Съобщение:</label>
<textarea id="message" rows="4" cols="40" name="message" placeholder="Въведете съобщение" required></textarea>
<div id="mistake-field"> </div>
<input type="submit" name="button" value="Изпрати"/>
</div>
</form>
<!-- footer -->
<footer>
<hr>
<div id="footer">
<div>
<img id="logo" src="./images/logo.png" alt="Лого">
<a target="_blank" href="https://www.facebook.com/%D0%A1%D1%87%D0%B5%D1%82%D0%BE%D0%B2%D0%BE%D0%B4%D0%BD%D0%B8-%D1%83%D1%81%D0%BB%D1%83%D0%B3%D0%B8-%D0%95%D0%BB%D0%B8%D0%BD%D0%B0-%D0%95%D0%9E%D0%9E%D0%94-368462670244655/?modal=admin_todo_tour">
<img id="facebook" src="./images/facebook-logo.png" alt="Фейсбук">
Посетете и харесайте нашата страница във Фейсбук.</a> </div>
<p>Copyright © 2017 All Rights Reserved</p>
</div>
</footer>
</div>
<!--|ADD| <script> here or on external file |BEGIN|-->
<script>
/* Create a mediaQueryList (mql) with the breakpoint
|| matching your iPad width when in landscape mode
*/
var mql = window.matchMedia('(min-width: 1025px)');
// The callback function passing the Event Object
function modDrawer(e) {
// if change media event matches the mql...
if (e.matches) {
// ...close .drawer...
$('.drawer').drawer('close');
//...remove the plugin...
$('.drawer').drawer('destroy');
//...and hide the menu.
document.querySelector('#mobNav').style.display = 'none';
// Otherwise...
} else {
//...start the plugin...
$('.drawer').drawer();
//...make the menu...
document.querySelector('#mobNav').style.display = 'block';
//...and the button visisble.
document.querySelector('.drawer-toggle.drawer-hamburger').style.cssText = 'block !important';
}
}
/* Register the mql to listen for a media change
|| modDrawer() is the callback
*/
mql.addListener(modDrawer);
</script>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|END|-->
</body>
</html>
I can not seem to style my website... for example the <pre> tags.
Nothing I do works. I am trying to style the whois results, I've tried wrapping it in a div and styling that, styling the pre tags only, styling everything. I just can't seem to get it working. I am hoping I am missing something stupid. You can see from the CSS I have tried numerous combinations (tried deleting them all just having pre ect)
Nav bar:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="javascript.js"></script>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>CWCS Domain Checker Tool</title>
</head>
<body>
<!--- This Keeps the navbar from staying right near top -->
<div class="header">
</div>
<!---- Nav bar, Using bootstrap ----->
<nav class="navbar navbar">
<div class="container-fluid">
<div class="navbar-header">
<div class="nav-bar-logo">
<img src="images/cwcs-logo.png">
</div>
</div>
<div class="nav-list-container">
<ul class="nav navbar-nav">
<li>Domain Diagnostics</li>
<li><a id="sd" href="#">Server Diagnostics</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Second Line Tools
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a id="dc" href="#">Daily Checklist</a></li>
<li><a id="bt" href="#">Backup Tracker</a></li>
<li><a id="tl" href="#">Task List</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!------- End of nav bar ---->
Main page -
<?php
## Includes nav bar
include('navbar.php');
include('phpfiles/domainclass.php');
if (isset($_GET['userInput']))
{
$domainName = $_GET['userInput'];
}
?>
<!---- The input form ---->
<form class="form">
<div class="domainquery">
<div class="input-group">
<input id="domainName" name="userInput" class="form-control input-md" type="text" placeholder="example.com" value="<?php if (isset($domainName)) echo $domainName ?>" autocomplete="off" autofocus>
<div class="input-group-btn">
<button type="submit" class="btn btn-primary btn-md">Query Domain</button>
</div>
</div>
</div>
</form>
<!---- End of input form --->
<!---- start of content --->
<div class ="container-fluid">
<!----- Check of the variable has been set before showing --->
<?php
##checks if the variable name $domainName is set, before loading everything below
if (isset($domainName)):
?>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-5 col-sm-12 col-xs-12">
<h3>DNS Records </h3>
<div class="dnscontain">
<script>
// Loads the return vaue of the call into the "dnscontain" div.
$(".dnscontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "<?php echo $domainName ?>",
q: 'dns'
});
</script>
</div>
<h3>SSL Result</h3>
<h3>NMAP Result</h3>
<div class="nmapcontain">
<script>
// Loads the return vaue of the call into the "dnscontain" div.
$(".nmapcontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "<?php echo $domainName ?>",
q: 'nmap'
});
</script>
</div>
<h3>PING Result</h3>
<div class="pingcontain">
<script>
// Loads the return vaue of the call into the "dnscontain" div.
$(".pingcontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "<?php echo $domainName ?>",
q: 'ping'
});
</script>
</div>
<!--- Closing div tag for left column -->
</div>
<!--- starting right column -->
<div class="col-lg-6 col-md-5 col-sm-12 col-xs-12">
<h3>WHOIS Result</h3>
<div class="whoiscontain">
<script>
// Loads the return vaue of the call into the "whoiscontain" div.
$(".whoiscontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "<?php echo $domainName ?>",
q: 'whois'
});
</script>
<!--Whoiscontain div end -->
</div>
<!--- right column div end -->
</div>
<!--- closing div tag for 1st row --->
</div>
</div>
<!---- ends the check on if the variable is set -->
<?php
###End the "IF" check
endif
?>
<!---- Closing div tag for container-fluid --->
</div>
</body>
</html>
Ajax return page --
<?php
include 'domainclass.php';
$result = domain::getWhois($domainName);
?>
<pre class="whois"> <?php echo $result ?> </pre>;
Style sheet
.header
{
margin:1%;
}
.domainquery
{
margin-bottom:3%;
padding:40px 50px;
}
.nav-bar-logo
{
margin-right:20px;
padding-right:20px;
}
.table
{
font-size:5px;
}
pre .whois
{
white-space:pre-wrap;
background-color:black;
color:white;
word-wrap: break-word;
}
.whoiscontain
{
white-space:pre-wrap;
background-color:black;
width:100%;
color:white;
word-wrap: break-word;
}
pre
{
white-space:pre-wrap;
background-color:black;
color:white;
word-wrap: break-word;
}
HTML output of page as requested (ignore style sheeting being above the bootstrap stylesheet, was trying something.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="javascript.js"></script>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>CWCS Domain Checker Tool</title>
</head>
<body>
<!--- This Keeps the navbar from staying right near top -->
<div class="header">
</div>
<!---- Nav bar, Using bootstrap ----->
<nav class="navbar navbar">
<div class="container-fluid">
<div class="navbar-header">
<div class="nav-bar-logo">
<img src="images/cwcs-logo.png">
</div>
</div>
<div class="nav-list-container">
<ul class="nav navbar-nav">
<li>Domain Diagnostics</li>
<li><a id="sd" href="#">Server Diagnostics</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Second Line Tools
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a id="dc" href="#">Daily Checklist</a></li>
<li><a id="bt" href="#">Backup Tracker</a></li>
<li><a id="tl" href="#">Task List</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!------- End of nav bar ---->
<!---- The input form ---->
<form class="form">
<div class="domainquery">
<div class="input-group">
<input id="domainName" name="userInput" class="form-control input-md" type="text" placeholder="example.com" value="lomcn.org" autocomplete="off" autofocus>
<div class="input-group-btn">
<button type="submit" class="btn btn-primary btn-md">Query Domain</button>
</div>
</div>
</div>
</form>
<!---- End of input form --->
<!---- start of content --->
<div class ="container-fluid">
<!----- Check of the variable has been set before showing --->
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-5 col-sm-12 col-xs-12">
<h3>DNS Records </h3>
<div class="dnscontain">
<script>
// Loads the return vaue of the call into the "dnscontain" div.
$(".dnscontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "lomcn.org",
q: 'dns'
});
</script>
</div>
<h3>SSL Result</h3>
<h3>NMAP Result</h3>
<div class="nmapcontain">
<script>
// Loads the return vaue of the call into the "dnscontain" div.
$(".nmapcontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "lomcn.org",
q: 'nmap'
});
</script>
</div>
<h3>PING Result</h3>
<div class="pingcontain">
<script>
// Loads the return vaue of the call into the "dnscontain" div.
$(".pingcontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "lomcn.org",
q: 'ping'
});
</script>
</div>
<h3>Tracert Result</h3>
<div class="tracecontain">
<script>
// Loads the return vaue of the call into the "dnscontain" div.
$(".tracecontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "lomcn.org",
q: 'trace'
});
</script>
</div>
<!--- Closing div tag for left column -->
</div>
<!--- starting right column -->
<div class="col-lg-6 col-md-5 col-sm-12 col-xs-12">
<h3>WHOIS Result</h3>
<div class="whoiscontain">
<script>
// Loads the return vaue of the call into the "whoiscontain" div.
$(".whoiscontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "lomcn.org",
q: 'whois'
});
</script>
<!--Whoiscontain div end -->
</div>
<!--- right column div end -->
</div>
<!--- closing div tag for 1st row --->
</div>
</div>
<!---- ends the check on if the variable is set -->
<!---- Closing div tag for container-fluid --->
</div>
</body>
</html>
to style bootstrap you can over ride bootstrap styles or make your own new styles.
They recommend not editing the bootstrap .CSS directly so updates to bootstrap will not change your design.
You are correct to place your own style sheet call below the bootstrap call, so yours will override.
Even though your styles will over ride you might not be able to over ride a bootstrap rule that has the !important tag. You can either use the bootstrap classes and ID's in your stylesheet and make new rules, using your own !Important to force them through if necessary, or add additional classes for your styles:
a bit of code
was `<div class="col-md-12">`
make `<div class="col-md-12 myCol">`
and then make rules on your stylesheet for
.myCol{
these styles should persist
}
I'm trying the tab example from semantic ui but I can't make it work. the tabs don't change. did I forget to include something?
$(function() {
$('.menu .item').tab();
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.js"></script>
<div class="ui top attached tabular menu">
<a class="item active" data-tab="first">First</a>
<a class="item" data-tab="second">Second</a>
<a class="item" data-tab="third">Third</a>
</div>
<div class="ui bottom attached tab segment active" data-tab="first">
First
</div>
<div class="ui bottom attached tab segment" data-tab="second">
Second
</div>
<div class="ui bottom attached tab segment" data-tab="third">
Third
</div>
I beleive you need to call this
$(function () {
$('.menu .item').tab();
});
to make your tabs works.
And semantic-ui have great documentation you should look there.
I have created a sample web application using jQuery Mobile.
I have created two <div>s; one contains href and another contains the content. When I click on HREF It showing jquery-mobile script Error as like below:
Error Loading Page
Can anybody see what might be causing this error?
<html> <head runat="server"> <title>How to expand collapse div layer using jQuery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-.0a3.min.js"></script> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-.0a3.min.css" />
<script language="javascript">
$(document).ready(function () {
var $pages = $('#pages > *').hide();
$('#content a').click(function() {
$pages.hide();
$($(this).attr('href') ).show();
});
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="header" class='header_align'>Bristol-Myers Squibb</div>
<h2>
How to expand collapse div layer using jQuery</h2>
<div id="toggle">
<div id="heading">Heading</div>
<div id="content">
<ul>
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
</ul>
</div>
</div>
<div id="pages">
<div id="page-1">Page 1 Content</div>
<div id="page-2">Page 2 Content</div>
<div id="page-3">Page 3 Content</div>
</div>
</div>
</body>
</html>
The jQuery mobile default behavior of a link with a named anchor is to jump to a page (data-role="page") with the respective id. But there is no such page for page-1, page-2 or page-3 so the error occurs.
Try this
$(document).ready(function () {
var $pages = $('#pages > *').hide();
$('#content a').click(function() {
$pages.hide();
$($(this).attr('href') ).show();
return false;
});
});