somebody has an idea why this button in the
"(nav class="sidebar-collapse")"
not worth the "toggled" on there?
So in the end it looks like
"(nav class="sidebar-collapse toggled")".
EDIT: to the left is a vertical menu, and above from the menu is a button when you click the button the menu will fold in and out.
Button
<button type="button" id="menu-toggle" class="toggler"></button>
Sidebar:
<nav id="sidebar" class="sidebar-collapse">
<div class="side-widgets overflow">
<!-- Profile Menu -->
<div class="text-center s-widget m-b-25 dropdown" id="profile-menu">
<jdoc:include type="modules" name="user1" style="xhtml" />
</div>
<div class="s-widget m-b-25">
<jdoc:include type="modules" name="user2" style="xhtml" />
</div>
<!-- User 2 -->
<div class="s-widget m-b-25">
<jdoc:include type="modules" name="user3" style="xhtml" />
</div>
<!-- User 3 -->
<div class="s-widget m-b-25">
<jdoc:include type="modules" name="user4" style="xhtml"/>
</div>
</div>
<jdoc:include type="modules" name="menu" />
just want to know why the code does not work yet.
when I click the button, the class of a div to change.
and jquery does not work
$(document).ready(function(){
$(".toggler").click(function(){
$(".sidebar-collapse").toggleClass("toggled");
});
});
Related
I connected my templete.php to style.css but when I am changing anything in templete.php, it's showing the result but if I change anything in the stylesheet, it shows no result. what should I do?
My website is not live. i am doing it on wamp server.
templete.php
<!DOCTYPE html>
<html>
<head lang="en">
<title>SEO SOBER</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Merienda"
rel="stylesheet"
<head>
<body>
<header id="particles-js">
<?php
include "navbar.php";
?>
</header>
<!--..... header ends.......-->
<div class="clients">
<h3>Our Clients</h3>
<img class="client-img" src="images/clients.png">
</div>
<!--clients ends -->
<div class="container-About">
<div class="text">
<h3>SEO SOBER Digital Story</h3>
<p>about company</p>
</div>
<div class="button">
READ MORE
</div>
</div>
<!-- about ends -->
<div class="features">
<h3>Services</h3>
<div class="maincontainer">
<!-- first card-->
<div class="thecard">
<div class="thefront">
<div class="seo_card">
<img class="services-image" src="images/seo-gif-10.gif">
<h4>Search Engine Optimization</h4>
</div>
</div>
<div class="theback">back of the card</div>
</div>
<!-- second card-->
<div class="thecard">
<div class="thefront">
<div class="seo_card">
<img class="services-image" src="images/web-design-service.gif">
<h4>Web Design</h4>
</div>
</div>
<div class="theback">back of the card</div>
</div>
<!-- third card-->
<div class="thecard">
<div class="thefront">
<div class="seo_card">
<img class="services-image" src="images/Development.gif">
<h4>Web Development</h4>
</div>
</div>
<div class="theback">back of the card</div>
</div>
<!-- fourth card-->
<div class="thecard">
<div class="thefront">
<div class="seo_card">
<img class="services-image" src="images/social.gif">
<h4>Social Media Marketing</h4>
</div>
</div>
<div class="theback">back of the card</div>
</div>
<div class="clearfix">
</div>
</div>
</div>
<!-- services end-->
<script src="js/particles.js"></script>
<script src="js/particles.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
please tell me what to do...
I am trying to do changes for half an hour but nothing happenes.
I also add the particles effect. is that the problem?
i think you are loading your cache, you have to hard reset your page. Try reloading like this on your page:
> -Hold the Ctrl key and press the F5 key.
> -Hold the ⇧ Shift key and click the Reload button on the navigation toolbar.
> -Hold the Ctrl key and click the Reload button on the navigation toolbar.
> -Hold the ⇧ Shift key and press the F5 key.
I have a semantic-UI lefside menu that I want to be persistent. I am trying to make 2 states - a wide one with type for each item, and a compact one with an image for each item.
Currently there are a few issues that I am totally stumped on!
1) Why does the menu completely go away on click?
2) How can I make the page NOT do dim?
3) Can the page collapse in width instead of getting pushed to the right?
4) is it possible to have two menu states, as described, and toggle between them on click?
Thank you very much!
My site is here: http://itp.evejweinberg.com/left/
And my html:
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="semantic/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,800" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<!-- my json of content -->
<script type="text/javascript" src="list.js"></script>
<!-- jQuery to build that content -->
<script type="text/javascript" src="buildScene.js"></script>
<script src="semantic/semantic.min.js"></script>
</head>
<!--//do I need this class? -->
<body class="pushable">
<!-- semantic says to put everything in pusher -->
<div class="pusher">
<div class="all">
<div id="main"></div>
<div class="title-holder">
<div class="animatedDiv"></div>
</div>
<div class='container'>
<div class='header'></div>
<div class="all-books"></div>
</div>
</div>
</div>
<!-- menu -->
<div class="ui vertical left labeled menu fixed small sidebar">
<div class="header link item" onclick="scrollTo(captology)">Intro</div>
<div class="item">
<div class="header link item">Emotions</div>
<div class="menu">
<a class="item link" onclick="scrollTo(hope)">Hope</a>
<a class="item link" onclick="scrollTo(anxiety)">Anxiety</a>
<a class="item link" onclick="scrollTo(fear)">Fear</a>
</div>
</div>
<div class="item">
<div class="header link item">Psychology</div>
<div class="menu">
<a class="item link" onclick="scrollTo(transparency)">Transparency</a>
<a class="item link" onclick="scrollTo(loss)">Loss Aversion</a>
<a class="item link" onclick="scrollTo(dark)">Dark Patterns</a>
<a class="item link" onclick="scrollTo(social)">Social Pressure</a>
</div>
</div>
<div class="item">
<div class="header link" onclick="scrollTo(fogg)">Fogg</div>
<div class="menu">
<a class="item link" onclick="scrollTo(motivation)">Motivation</a>
<a class="item link" onclick="scrollTo(ability)">Ability</a>
<a class="item link" onclick="scrollTo(trigger)">Trigger</a>
</div>
</div>
<div class="item">
<div class="header link" onclick="scrollTo(flow)">Flow</div>
<div class="menu">
<a class="item link" onclick="scrollTo(chunking)">Chunking</a>
<!-- <a class="item">FAQs</a> -->
</div>
</div>
<div class="item">
<div class="header">Ethics</div>
<div class="menu">
<div class="nav-rect" id="e"></div>
<div class="nav-rect" id="e"></div>
<div class="nav-rect" id="e"></div>
<div class="nav-rect" id="e"></div>
</div>
<div class="header link" onclick="scrollTo(sources)">Sources</div>
</div>
<div class="header">About</div>
<div class="ui category search item">
<div class="ui transparent icon input">
<input class="prompt" type="text" placeholder="Search...">
<i class="search link icon"></i>
</div>
<div class="results"></div>
</div>
</div>
</div>
<script type="text/javascript" src="content.js"></script>
<script type="text/javascript" src="sketch.js"></script>
<script type="text/javascript" src="js/intro.js"></script>
<script type="text/javascript" src="js/hope.js"></script>
<script type="text/javascript" src="js/lossAversion.js"></script>
<script type="text/javascript">
$('.sidebar').sidebar('show');
// $('.sidebar')
// .visibility({
// type : 'fixed',
// offset : 45 // give some space from top of screen
// });
// $('.menu').click(function(){
// $('.ui.labeled.icon.sidebar').sidebar('toggle');
//
// })
// $('.ui.sidebar').click(function(){
// sidebar('toggle');
// })
</script>
</body>
</html>
Mystery solved! Semantic-UI was dynamically adding to my html on build. I removed the class 'sidebar' and all pusher and dimmer css went away. That solves #1 and #2. For the rest, i'm just going to go back to jQuery animations to slide the left nav to the left and collapse it's width. Thx All!
I am trying to display a jQuery-ui autocomplete textbox on top of my bootstrap side nav bar. The problem I am occurring is that the autocomplete list is displaying behind the nav bar. So my question is what change can I make to move on top?
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/simple-sidebar.css" rel="stylesheet">
<link href="includes/jquery-ui.css" rel="stylesheet">
<div id="sidebar-wrapper">
<form>
<div class="input-group">
<input type="text" class="form-control mr-sm-2" placeholder="Search" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button class="btn btn-success" type="submit">Search</i></button>
</div>
</div>
</form>
<ul class="sidebar-nav">
<img src="images/me.jpg" style="width:100%; clear:both;" />
<li class="sidebar-brand">
Home
</li>
<li>
Project
</li>
<li>
Overview
</li>
<li>
Events
</li>
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<img src="images/hamburger_icon.png" width="20px" height="20px"/>
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<script src="includes/jquery-ui.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Menu Toggle Script -->
<script>
var availableTags = [
<?php
$rows = getSkills($conn);
$count=0;
$rowcount=$rows->num_rows;
foreach ($rows as $row) {
$count++;
if ($rowcount>$count){
echo "'{$row['Skill']}',";
}
else
{
echo "'{$row['Skill']}'";
}
}?>];
$("#srch-term").autocomplete({
source: availableTags
});
$("#wrapper").toggleClass("toggled");
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
Increase z-index of ui-autocomplete class.
I am playing around with this bootstrap template ( github, emptypage code which I use ) and mostly just interested in the sidebar. However I cant seem to get scrollspy working on it in case the side menu gets too long. This is what I have:
<div class="col-md-3 left_col">
<div class="left_col scroll-view">
<div class="navbar nav_title" style="border: 0;">
<i class="fa fa-cogs"></i> <span>Engine of Travel</span>
</div>
<div class="clearfix"></div>
<!-- menu prile quick info -->
<div class="profile">
<div class="profile_pic">
<img src="images/img.jpg" alt="..." class="img-circle profile_img">
</div>
<div class="profile_info">
<span>Welcome,</span>
<h2>User</h2><br/>
</div>
</div>
<!-- /menu quick info -->
<br/>
<!-- sidebar menu -->
<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
<div class="menu_section">
<h3>Side Side</h3>
<ul class="nav side-menu">
<li><a><i class="fa fa-flag"></i> Sidething <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" data-spy="scroll" data-target="#child_menu" style="display: none">
<li>Option 2
</li>
<li>Option 3
</li>
...
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
Javascript:
<script type="application/javascript">
$("#child_menu").scrollspy();
</script>
The menu generated displays elements that can fit in the screen and after that 'breaks' as you can see in the image. WHat would be the best way to get scroll to work.
I have a set of div's, What I want to do is when I click the read more button It shows the div "myContent" and hides the button for that particular container not all the divs with the same class name. and when I click the close button it hides the div (and because the button is there it should technically hide the button as well) and show the read more button again.
Whats happening right now is either all are showing or none are showing.
I am a newbie (using Jquery) Any help most appreciated.
The HTML
<!-- -->
<div class="member-content">
<div class="member-box">
<div class="photo">
<img src="" alt="" />
</div>
<div class="contact-details">
<h3>Mike</h3>
<span class="role">Member</span><br>
<span class="telephone">07595 8674523</span><br>
Read More
</div><!-- .contact-details -->
</div><!-- .member-box -->
</div><!-- .member-content -->
<div class="te contentDiv">
<div class="myContent" style="display:none">
<p>This Text is hidden</p>
<a id="close_btn" href="#" class="close-more">Close</a>
</div>
</div>
<!-- -->
<!-- -->
<div class="member-content">
<div class="member-box">
<div class="photo">
<img src="" alt="" />
</div>
<div class="contact-details">
<h3>Mike</h3>
<span class="role">Member</span><br>
<span class="telephone">07595 8674523</span><br>
Read More
</div><!-- .contact-details -->
</div><!-- .member-box -->
</div><!-- .member-content -->
<div class="te contentDiv">
<div class="myContent" style="display:none">
<p>This Text is hidden</p>
<a id="close_btn" href="#" class="close-more">Close</a>
</div>
</div>
<!-- -->
<!-- -->
<div class="member-content">
<div class="member-box">
<div class="photo">
<img src="" alt="" />
</div>
<div class="contact-details">
<h3>Mike</h3>
<span class="role">Member</span><br>
<span class="telephone">07595 8674523</span><br>
Read More
</div><!-- .contact-details -->
</div><!-- .member-box -->
</div><!-- .member-content -->
<div class="te contentDiv">
<div class="myContent" style="display:none">
<p>This Text is hidden</p>
<a id="close_btn" href="#" class="close-more">Close</a>
</div>
</div>
<!-- -->
Thanks!
You can try this, Based on my understanding.
$('.read-more').click(function () {
$(this).closest('.member-content').next('.contentDiv').find('.myContent').show();
$(this).hide();
});
$('.close-more').click(function () {
$(this).closest('.contentDiv').prev('.member-content').find('.read-more').show();
$(this).closest('.myContent').hide();
});
DEMO
If I understand right here is what you are looking for :)
$('.read-more').click(function () {
$(this).closest('.member-content').next('.contentDiv').find('.myContent').fadeIn();
$(this).hide();
});
$('.close-more').click(function () {
$(this).closest('.contentDiv').prev('.member-content').find('.read-more').fadeIn();
$(this).closest('.myContent').hide();
});