I have a web application based on MVC 4 framework with Bootstrap(twitter) and i want to make one of my pages a one page navigation with a scrollspy:
I have a fixed navbar at the top throughout my site and in one page of the site i want i addition a side bar ("nav nav-pills nav-stacked pull-left") with a scrollspy.
col-md-3 = on the left that will be storing my sidebar
col-md-9 = on the right that will be storing my context
I try different things and nothing seem to work, one thing that i notice is
that i need to add to the body tag:
<body data-spy="scroll" data-target="#side-nav">
but in MVC the body tag is on the "_layout" and i don't want to touch this shared partial view.
What can i do ? maybe someone has implement this feature in MVC and could give me a small example of it ?
This is my code :
#{
ViewBag.Title = "Designer";
}
<div class="row">
<div class="col-md-3">
#* Index *#
<div class="nav-pills pull-left affix navspy">
<div id="side-nav">
<ul class="nav">
<li>General</li>
<li>Words</li>
<li>File Type</li>
<li>Routes</li>
</ul>
</div>
</div>
</div>
<div class="col-md-9">
<div id="general">
#* Section Gereral *#
<h2 class="page-header">Gereral</h2>
<p>Lorem ipsum dolor sit amet, vel cu fugit vitae electram, </p>
</div>
<div class="active" id="words">
#* Section Words *#
<h2 class="page-header">Words</h2>
<p>Lorem ipsum dolor sit amet, vel cu fugit vitae electram, </p>
</div>
<div id="filetype">
#* Section File Type *#
<h2 class="page-header">File Type</h2>
<p>Lorem ipsum dolor sit amet, vel cu fugit vitae electram, </p>
</div>
<div id="routes">
#* Section Routes *#
<h2 class="page-header">Routes</h2>
<p>Lorem ipsum dolor sit amet, vel cu fugit vitae electram, </p>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('body').attr("data-spy", "scroll");
$('body').attr("data-target", "#side-nav");
});
</script>
What i'm missing here ?
You can use javascript to add attributes dynamically to the <body> tag.
Add this script just to the page where the scrollspy is. When it is loaded inside the _Layout, the attributes will be added to the <body> tag.
yourPage.cshtml
#{
ViewBag.Title = "Designer";
}
#section scripts
{
<script>
$(document).ready(function(){
$( 'body' ).attr("data-spy","scroll");
$( 'body' ).attr("data-target","#side-nav");
});
</script>
}
[...]
Shared \ _Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
[...]
#RenderBody()
[...]
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", false)
</body>
</html>
Related
I am super new to coding and web development and I am not sure how to solve my issue:
I am trying to add an image to the column that I created using bootstrap 4 grid system. However, as soon as I add the image, a horizontal scrollbar appears on the screen and I'm not sure why.
Here is a screenshot of what happens: https://gyazo.com/c383ecb9180181349363e0636047867c
<div class="container">
<div class="row">
<div class="col-6">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="col-6">
<img src="https://images.unsplash.com/photo-1585600270404-543d0eac85e1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3042&q=80">
</div>
</div>
My second issue is that although the horizontal scrollbar gets removed when I use the "img-fluid" class for my image, however when I change the container to container-fluid so that it covers the entire width of the screen and then use the class "px-0" for my container to remove the extra padding, I once again get horizontal scrollbars appearing on my screen.
<div class="container-fluid px-0">
<div class="row">
<div class="col-6">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="col-6">
<img class="img-fluid" src="https://images.unsplash.com/photo-1585600270404-543d0eac85e1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3042&q=80">
</div>
</div>
The root cause of the problem is due to no restriction on 'width' being applied to the image.
The image is very big and hence, it is causing the horizontal scroll bar to appear.
Bootstrap provides a class called 'img-fluid' to resolve this common issue.
The horizontal scroll bar can be avoided by specifying the image class of 'img-fluid', as shown below.
The second problem with the use of container-fluid px-0 can be fixed by specifying the px-lg-5 class instead of px-0.
(px-lg-5 works well for wide sections / outer-most divs)
Working example with 'img-fluid' and container-fluid px-lg-5 classes:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<title>Bootstrap - responsive image</title>
</head>
<body>
<div class="container-fluid px-lg-5">
<div class="row">
<div class="col-6">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="col-6">
<img class="img-fluid"
src="https://images.unsplash.com/photo-1585600270404-543d0eac85e1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3042&q=80">
</div>
</div>
</body>
</html>
Output:
More information:
https://getbootstrap.com/docs/4.0/content/images/
Either you can set overflow : hidden to the second column container if you want your page to not scroll, or you can set height and width of the image to avoid scrolling and to make the whole image visible.
<div class="col-6">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="col-6" style="overflow: hidden">
<img height="100px" width="100px" src="https://images.unsplash.com/photo-1585600270404-543d0eac85e1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3042&q=80" />
</div>
Learn more about overflow property at https://www.w3schools.com/css/css_overflow.asp and image attributes at https://www.w3schools.com/html/html_images.asp
To solve your second problem, just add the margin:0 to the <div class="row">
What's exactly the purpose of col-md-offset-*?
I know the purpose of col-md-12 without the offset. but with that I've no idea, I've tried to play with it but still nothing.
Short version of answer. Offset make empty column with custom width before our column with data. If you want to make empty column with custom width after your column with data then use pull (col-md-pull-*).
Example:
In medium size window we want to create 2 empty cells, 7 cells with content and again 3 empty cells. We could do that this way.
<div class="row">
<div class="col-md-offset-2 col-md-7 col-md-pull-3">OUR CONTENT</div>
</div>
And this is how it would look like without offsets. We should create empty divs with custom width.
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-7">OUR CONTENT</div>
<div class="col-md-3"></div>
</div>
Move columns to the right using .col-md-offset-* classes. These classes increase the left margin of a column by * columns. For example, .col-md-offset-2 moves .col-md-2 over four columns.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-md-12">
<div class="col-md-2">First col-md-2</div>
<div class="col-md-2 col-md-offset-2"> col-md-2 with offset 2</div>
</div>
</body>
</html>
.col-md-offset-* to leave a particular number of virtual Bootstrap columns to the left of any column (kind of like invisible place holders).
It is used for giving space from margin-left, you can see in my example first div is used with offset thats why it is displaying from margin left
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-xs-4 col-md-offset-2 col-xs-offset-2">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-md-4 col-xs-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
</body>
</html>
So col-md-12 will take up the whole of the preceding div. But what happens if you dont want to take up the whole div?
Say you only want to take up half the div but want to centre the content then you can do col-md-6 col-md-offset-3 This will make a div of 6 cols wide and offset it by 3. So the content starts 3 cols in and then goes for 6 cols.
You should really read the bootstrap docs about their grid system and how it works.
It is used to move columns to the right. For details, access http://getbootstrap.com/css/#grid-offsetting
col-md-offset-* give margin from left. Like if i need col-md-6 on right but not on left then we need to add "col-md-offset-6" with col-md-6.
Example:
<div class="row">
<div class="col-md-offset-6 col-md-6"></div>
</div>
Try to add this html in your editor and check output in browser.
It is used for giving space from margin-left, you can see in my example first div is used with offset thats why it is displaying from margin left
Try to resize your browser or on other devices to see: https://getbootstrap.com/examples/grid/
Here is my screenshot on large screen (col-lg-* applied), view it on Inspect
.col-md-offset-2 make a space between 2 col-md-* in a row, check image below.
Here is my screenshot on medium screen (col-md-* applied), view it on Inspect
Hope this help.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-md-12">
<div class="col-md-2">First col-md-2</div>
<div class="col-md-2 col-md-offset-2"> col-md-2 with offset 2</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-xs-4 col-md-offset-2 col-xs-offset-2">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-md-4 col-xs-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
</body>
</html>
According to W3School: it is similar to margin-left, but with unit as col. You can try it yourself or read reference there.
Right now I have two divs using "one-half columns" class.
As you can see here, the bottom card on the left side is still aligned with the one on the bottom right.
I want Pinterest kind of style like this, but I do not know how because they are in different rows.
here is my html code.
<div class="container">
<div class="row">
<div id="cards" class="one-half column" style="margin-top: 25%">
<img class="card-image" src="img/sample.png">
<div class="title">
<h4>Stealth Rats</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit eu nibh vitae maximus.</p>
</div>
</div>
<div id="cards" class="one-half column" style="margin-top: 25%">
<img class="card-image" src="img/sample.png">
<div class="title">
<h4>Basic Page</h4>
<p>This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the Skeleton documentation.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit eu nibh vitae maximus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc a mollis arcu.</p>
</div>
</div>
</div>
<div class="row">
<div id="cards" class="one-half column" style="margin-top: 5%">
<img class="card-image" src="img/sample.png">
<h4>Basic Page</h4>
<p>This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the Skeleton documentation.</p>
</div>
<div id="cards" class="one-half column" style="margin-top: 5%">
<img class="card-image" src="img/sample.png">
<h4>Basic Page</h4>
<p>This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the Skeleton documentation.</p>
</div>
Thanks in advance!
You can't do it in plain css unless you work with columns instead of rows (and that breaks content importance).
What you want is Masonry or another javascript alternative.
Also, your html has errors, you cannot use the same id more than once. Change it to class='cards' and if you want to use masonry you have to put every card inside the same div, so in this case, inside the same row.
Then you can call it
$('.row').masonry({
itemSelector: '.cards',
columnWidth: 200 //this is an example.
});
Since masonry is responsive, you can forget about skeleton for this part.
I'm trying to make a SPA and use the Hot Towel template with Durandal. So far I have successfully added a Fancybox to my spa and it shows a image
<a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm9.staticflickr.com/8486/8225588056_d229e8fe57_b.jpg" title="Porth Nanven (MarcElliott)">
<img src="IMAGEPATH" alt="" />
</a>
$(document).ready(function () {
$(".fancybox-thumb").fancybox({
openEffect: 'elastic',
closeEffect: 'elastic',
helper: {
title: {
type: 'outside'
},
thumbs: {
width: 50,
height: 50
}
}
});
$('#label').click(function () {
$('#inline').fancybox();
});
});
This is working not that properly but okay;)
Now I want to have a own inline in the fancybox like this:
<div id="inline" style="display:none;width:500px;">
<p>
<a id="add_paragraph" title="Add" class="button button-blue" href="javascript:;">Add new paragraph</a>
Close
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
Now when I click: <a class="fancybox-thumb" href="#inline">Inline</a>, I do get the fancybox with my info. But the url is set back to localhost:2321/#inline so I'm redirected back to home but I do see the fancybox.
How can I solve this, so that the fancybox is shown an the right page in my SPA and stays there?
I have got this working ;)
THis is what I did,
HTML:
<a class="fancybox-link">Inline</a>
<div style="display: none">
<div id="inlineContent" style="width:1000px;">
<h2>Lorem ipsum dolor sit amet</h2>
<p>
<a id="add_paragraph" title="Add" class="button button-blue" href="javascript:;">Add new paragraph</a>
Close
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
Javascript:
$("a.fancybox-link").click(function (e) {
$.fancybox({
content: $('#inlineContent').html(),
type: 'inline'
});
return false;
});
Bye bye
If you already initialized fancybox
$(".fancybox-thumb").fancybox({
openEffect: 'elastic',
closeEffect: 'elastic',
helper: {
title: {
type: 'outside'
},
thumbs: {
width: 50,
height: 50
}
}
});
then you can use the same script for both your images AND your inline content, so the link for the image(s) :
<a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm9.staticflickr.com/8486/8225588056_d229e8fe57_b.jpg" title="Porth Nanven (MarcElliott)"><img alt="" src="http://farm9.staticflickr.com/8338/8224516167_bc7a5f6699_m.jpg" /></a>
and the link for the inline content :
<a class="fancybox-thumb" data-fancybox-type="inline" href="#inline">Inline</a>
Notice that we added the data-fancybox-type="inline" attribute to define the type of content for this specific item.
Your inline html structure can remain the same :
<div id="inline" style="display:none;width:500px;">
<p>
<a id="add_paragraph" title="Add" class="button button-blue" href="javascript:;">Add new paragraph</a>
Close
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
See JSFIDDLE
Hey i'm running my index page through the W3C validator and am getting 6 errors and need some help. The errors are:-
Line 57, Column5: error parsing attribute name
Line 57, Column 5: attributes construct error
Line 57, Column 5: Couldn't find end of Start Tag div line 56
Line 67, Column 14: Opening and ending tag mismatch: body line 14 and div
Line 69, Column 11: Opening and ending tag mismatch: html line 4 and body
Line 70: Extra content at the end of the document
This is my code:-
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<link rel="stylesheet" type="text/css" href="CSS/10000658.css" title="default" />
<link rel="alternate stylesheet" type="text/css" href="CSS/default.css" title="assignment2" />
<title>The Garden Co. | Home </title>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>The Garden Co.</h1>
</div>
<div id="menu">
<h1>Contents</h1>
<ul>
<li>Home</li>
<li>
Catalogue
<ul>
<li>Plant 1</li>
<li>Plant 2</li>
<li>Plant 3</li>
</ul>
</li>
<li>
<a class="section" href="plants_section/index3.html">Report</a>
</li>
<li>
<a class="section" href="plants_section/index4.html">Report(2)</a>
</li>
<li><a class="section" href="plants_section/form.html">Contact</a></li>
</ul>
</div><!-- end menu -->
<div id="content">
<div id="contentWrapper">
<h1>Welcome</h1>
<div class="text"
***<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed eros quis leo sollicitudin tempus. </p>***
</div>
***</div><!-- end contentWrapper -->***
</div><!-- end content -->
<div id="footer">
<p>© My name, 2012.</p>
</div>
</div><!-- end wrapper -->
***</body>***
***</html>***
If anyone can help solve these errors, it would be greatly appreciated. EDIT: Bolded lines are where the errors are found
You didn't close a <div> tag on line 57:
<div class="text"
I can see that your DIV tag isn't closed on line 57:
Should be:
<div class="text">
looks like this is the cause of most of your problems:
<div class="text"
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed eros quis leo sollicitudin tempus. </p>
should probably be:
<div class="text">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed eros quis leo sollicitudin tempus. </p>
</div><!--this is already there, just the tabbing is off so it looked like it was missing-->
fix that, and re-run it. let us know what errors are left.
Start with fixing your tag here:
<div class="text"
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed eros quis leo sollicitudin tempus. </p>
Need to close the tag so it should read: (missing the ">")
<div class="text">
Rerun it then and let us know results.