Here is the fiddle I am working on right now
http://codepen.io/trippygif/pen/KVWYdV
Here is the HTML
<div class="menu">
<div id="title-list">
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</div>
</div>
<div class="title">
<div id="heading">
<h1>AN OPEN PERSPECTIVE</h1>
</div>
<div id="list">
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Instagram</li>
<li>Reddit</li>
</div>
</div>
<div class="about">
<div class="container">
<div class="row">
<div class="col-md-6">
<h2 id="about-me" class="to-fit title-font">About Me</h2>
<p id="interests" class="span4">I am a self taught web developer with a degree in physics from the University of Colorado Boulder. I have strong interests in web design and development as well as mathematics.</p>
</div>
<div class="col-md-6">
<p>My Proficiencies</p>
<ul>
<li>#1</li>
<li>#2</li>
<li>#3</li>
</ul>
</div>
</div>
</div>
</div>
<div class="work">
<div id="work-heading" class="to-fit title-font">
<h1>Work</h1>
</div>
</div>
<div class="contact">
<div id="work-heading" class="to-fit title-font">
<h1>Contact</h1>
</div>
</div>
Basically I am having trouble with the Bootstrap alignment that occurs in the "about" div. I cannot seem to get the paragraph on the left side of the page and the list on the right side of the page. I assume something might be wrong with my CSS. Any suggestions would be much appreciated :)
If your problem is that the "About Me" heading and the list doesn't start in the same vertical height, then you have to do something with your .to-fit CSS rule where you set a padding-top : 80px;.
Just give a properly sized top padding or margin to your right block:
<div class="col-md-6" style="margin-top:120px;">
<p>My Proficiencies</p>
...
or
<div class="col-md-6" style="padding-top:120px;">
<p>My Proficiencies</p>
...
Of course you can/should place this rule to a CSS rule with a selector of your choice.
change class container tocontainer-fluid
<div class="menu">
<div id="title-list">
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</div>
</div>
<div class="title">
<div id="heading">
<h1>AN OPEN PERSPECTIVE</h1>
</div>
<div id="list">
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Instagram</li>
<li>Reddit</li>
</div>
</div>
<div class="about">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<h2 id="about-me" class="to-fit title-font">About Me</h2>
<p id="interests" class="span4">I am a self taught web developer with a degree in physics from the University of Colorado Boulder. I have strong interests in web design and development as well as mathematics.</p>
</div>
<div class="col-md-6">
<p>My Proficiencies</p>
<ul>
<li>#1</li>
<li>#2</li>
<li>#3</li>
</ul>
</div>
</div>
</div>
</div>
<div class="work">
<div id="work-heading" class="to-fit title-font">
<h1>Work</h1>
</div>
</div>
<div class="contact">
<div id="work-heading" class="to-fit title-font">
<h1>Contact</h1>
</div>
</div>
Related
I have ul list in div and if I set div height and overflow-y
It becomes scrollable.
<div class="inner" style="height:150px;overflow-y:scroll;font-size:18px;">
<ul id="mainul">
<li>
<div class="card">
<div class="card-body">
<p>This is the tweet frist<br>
tweet<br>
tweet<br>
test<p>
</div>
</div>
</li>
<li>
<div class="card">
<div class="card-body">
<p>This is the tweet that's second<br>
tweet<br>
tweet<br>
test<br>
</div>
</div>
</li>
</ul>
</div>
However when I add items by append of jquery.
$("#mainul").append(`
<li>
<div class="card">
<div class="card-body">
<p>Add this few times<br>
tweet<br>
tweet<br>
test<br>
</div>
</div>
</li>`);
There never appears scroll bar.
Is this the way to make scrollbar for dynamically added <li> ?
How should I solve this??
There were a few syntax errors in your code.
You were also missing the closing quote in $("#mainul") though Michelangelo edited it.
This works below.
$("#mainul").append(`
<li>
<div class="card">
<div class="card-body">
<p>
Add this few times<br>
tweet<br>
tweet<br>
test<br>
</p>
</div>
</div>
</li>`);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="inner" style="height:150px;overflow-y:scroll;font-size:18px;">
<ul id="mainul">
<li>
<div class="card">
<div class="card-body">
<p>This is the tweet frist<br>
tweet<br>
tweet<br>
test<p>
</div>
</div>
</li>
<li>
<div class="card">
<div class="card-body">
<p>This is the tweet that's second<br>
tweet<br>
tweet<br>
test<br>
</p>
</div>
</div>
</li>
</ul>
</div>
Sorry for my elementary question, but I have spent a lot of time and I can't understand the mistake. I have a card and I'd like to show the button on the right inside the card footer. Now the button is displayed on the left.
Thank you in advance!
This is my HTML page where I have the card
<div class="row">
<div class="col-100 tablet-auto desktop-auto">
<div class="card">
<div class="card-content card-content-padding">
<div class="row">
<div class="col-100 tablet-auto desktop-80">
<div class="list">
<ul>
<li>
<!--<a class="item-link smart-select smart-select-init">-->
<a href="#" class="item-link smart-select smart-select-init" data-open-in="popup" data-virtual-list="fruits1" data-page-back-link-text="Indietro">
<select name="fruits1">
<option value="">apple</option>
<option value="">banana</option>
</select>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Fruits 1</div>
</div>
</div>
</a>
</li>
<li>
<a href="#" class="item-link smart-select smart-select-init" data-open-in="popup" data-virtual-list="fruits2" data-page-back-link-text="Indietro">
<select name="fruits2"> </select>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Fruits 2</div>
</div>
</div>
</a>
</li>
</ul>
</div>
<!-- ./ list -->
</div>
<!-- ./ block -->
</div>
<!--col-->
</div>
<!--row-->
</div>
<!--card-content-->
<div class="card-footer">
<div class="row justify-content-right">
<div class="col text-align-right">
<a class="button button-fill" href="#">Search</a>
</div>
</div>
</div>
<!--card-footer-->
</div>
<!--card-->
</div>
<!--col-->
You can resolve issue by distribute a footer to two section, one for left, and second one for right, or by custom style....
You can update your code by adding empty span before your button, then the card footer will display your button in right...
Look at this demo.
<div class="card">
<div class="card-header">Card header</div>
<div class="card-content card-content-padding">Card with header and footer. Card headers are used to display card titles and footers for additional information or just for custom actions.</div>
<div class="card-footer"><span></span><a class="button button-fill" href="#">Search</a>
</div>
I am building my first app with framework7. Now I'm stuck because the tab with id="tab-1" is not loading, when the page is loaded or when refreshing page. I first have to tap on 'Home'-Tab to load tab-1. Tab-1 has "tab-active" an the Tab-link has also "tab-link-active".
Anyone seeing the problem? Thanks in advance.
<div class="statusbar-overlay"></div>
<div class="panel-overlay"></div>
<div class="panel panel-left panel-reveal">
<div class="content-block">
<p>Left panel content goes here</p>
</div>
</div>
<div class="views">
<div class="view view-main">
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<i class="f7-icons ios-only">bars</i>
</div>
<div class="center sliding">App Title</div>
</div>
</div>
<!-- Bottom Toolbar-->
<div class="toolbar tabbar-labels tabbar">
<div class="toolbar-inner">
<a href="#tab-1" class="tab-link tab-link-active">
<i class="f7-icons ios-only">home</i>
<span class="tabbar-label">Home</span>
</a>
<a href="#tab-2" class="tab-link">
<i class="f7-icons ios-only">bell</i>
<span class="tabbar-label">Alerts</span>
</a>
<a href="#tab-3" class="tab-link">
<i class="f7-icons ios-only">today</i>
<span class="tabbar-label">Calendar</span>
</a>
<a href="#tab-4" class="tab-link">
<i class="f7-icons ios-only">paper_plane</i>
<span class="tabbar-label">News</span>
</a>
</div>
</div>
<div class="pages navbar-fixed">
<div data-name="home" class="page">
<div class="tabs">
<div class="page-content tab tab-active" id="tab-1">
<div class="block">
<span><b>Home</b></span>
<p>...</p>
</div>
</div>
<div class="page-content tab" id="tab-2">
<div class="block">
<span><b>Alerts</b></span>
<p>...</p>
</div>
</div>
<div class="page-content tab" id="tab-3">
<div class="block">
<span><b>Calendar</b></span>
<p>...</p>
</div>
</div>
<div class="page-content tab" id="tab-4">
<div class="block">
<span><b>News</b></span>
<p>...</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="lib/framework7/js/framework7.min.js"></script>
<script type="text/javascript" src="js/my-app.js"></script>
Everything seems fine. You are using page-content tab. Add a margin-top for each page-content tab and check once.
i`m trying to remove all .col-md-1 class from all child element in particular div.
<div id="question123">
<div class="panel-title">
....
</div>
<div class="panel-body">
<div class="answer clearfix">
<h3> ... </h3>
<div class="answer clearfix">
<ul class"question-list">
<div class="row">
<div class = "col-md-1">
<li class="question-item" id="javatbd74656737">
<div class="checkbox">...</div>
</li>
</div>
<div class = "col-md-1">
<li class="question-item" id="javatbd74656737">
<div class="checkbox">...</div>
</li>
</div>
<div class = "col-md-1">
<li class="question-item" id="javatbd74656737">
<div class="checkbox">...</div>
</li>
</div>
</div>
</ul>
</div>
</div>
</div>
</div>
i now its deeply nested, but that is what i got from a dynamically generated html. i have to somehow access this particular question div. and delete the .col-md-1 from all the child div.
thanks for help !
you can use jQuery removeClass() function for this..
$('.question-list .col-md-1').removeClass('col-md-1');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="question123">
<div class="panel-title">
....
</div>
<div class="panel-body">
<div class="answer clearfix">
<h3> ... </h3>
<div class="answer clearfix">
<ul class"question-list">
<div class="row">
<div class = "col-md-1">
....
</div>
<div class = "col-md-1">
....
</div>
<div class = "col-md-1">
....
</div>
</div>
</ul>
</div>
</div>
</div>
</div>
You can use the the find() and removeClass methods for that.
$('#parentElement').find('.col-md-1').removeClass('col-md-1');
Get all the elements inside your #question123 and your .question-list and use removeClass for removing the class
$('#question123 .question-list .col-md-1').removeClass('col-md-1');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="question123">
<div class="panel-title">
....
</div>
<div class="panel-body">
<div class="answer clearfix">
<h3> ... </h3>
<div class="answer clearfix">
<ul class="question-list">
<div class="row">
<div class = "col-md-1">
....
</div>
<div class = "col-md-1">
....
</div>
<div class = "col-md-1">
....
</div>
</div>
</ul>
</div>
</div>
</div>
</div>
For a non-jQuery approach - you can get all the divs with that class using querySelectorAll and then remove the class.
var elements= document.querySelectorAll('.question-list .col-md-1');
elements.forEach(function(el){
el.classList.remove('col-md-1');
})
I recently installed "FullPage.js" to my site. I figured out how to get the slides working but the sections won't for some reason. Can't seem to find anything in the console.
<div class="section" id="section1">
<div class="slide active">
<div class="wrapper">
<span class="line"></span>
<div class="title">HOME</div>
<span class="line2"></span>
<div class="post">
<h1>Hey I'm <strong>Matt Hunzinger</strong></h1><br>
<p>I like making flat designs that <strong>elevate</strong> my client's businesses<br><br><span class="toSlide" data-index="3">Contact Me</span></p> <br> <hr> <br> <br> <br> <br> <br>
<div class="grid">
<span class="toSlide" data-index="2">
<div class="hex" id="about">
<li>About Me</li>
<img src="about.png">
</div>
</span>
<span class="toSlide" data-index="3">
<div class="hex" id="contact">
<img src="email.png">
</div>
</span>
<span class="toSlide" data-index="4">
<div class="hex" id="about">
<li>Work</li>
<img src="about.png">
</div>
</span>
<br>
</div>
</div>
</div>
</div>
</div>
<div class="section" id="section2">
<div class="slide">
<h1> hello all</h1>
</div>
</div>
JS
$(document).ready(function () {
$.fn.fullpage({
resize: false
});
});