I am creating a tabbed login page, so that the user can either log-in or click on other tabs for other info. Here's the code:
<div class="container">
<div class="row">
<div class="col-sm-offset-3 col-sm-6">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Log-in</a></li>
<li><a data-toggle="tab" href="#aboutus">What's HooHit?</a></li>
<li><a data-toggle="tab" href="#howworks">How it works!</a></li>
<li><a data-toggle="tab" href="#blog">Blog</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="aboutus" class="tab-pane fade">
<h3>HooHit Logo</h3>
<p>HooHit Pets is an online community...</p>
</div>
<div id="howworks" class="tab-pane fade">
<h3>Steps picture</h3>
<p>You simply upload a picture or video ...</p>
</div>
<div id="blog" class="tab-pane fade">
<br />
<p>...</p>
Click here!
</div>
</div>
</div>
</div>
</div>
The issue I am having is that when I run the code, the tabs don't work. So when I click on the blog tab as an example, the URL on the browser changes to http://localhost:43345/Account/Login2#blog but the tab doesn't change in the view. I can guess the reasoning (i.e. routing in MVC) but am not sure how to fix it. Any ideas?
Code is correct.
You might be missing a Jquery reference needed by boostrap in your page.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
Related
This question already has answers here:
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Closed 11 months ago.
Helo everyone!
Can not figure out how to align vertically items in Bootstrap 5 on a specific example. The row is separated into two columns ( col-md-6 ) and I want to position two items in only the first column one in the middle of the flexbox and the other in the end. I can't separate the two items, the only thing that works is to move them together. Any thoughts?
<div class="row min-vh-100" id="about">
<div class="col-md-6 bg-red d-flex flex-column justify-content-center">
<div class="text-center">
<h2>ABOUT</h2>
</div>
<div class="d-flex flex-column justify-content-end">
<div class="text-center">
<ul>
<li>about me /</li>
<li>projects /</li>
<li>contact</li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero expedita
ea assumenda aperiam? Nam atque dolorum aut quo,
magni voluptatum aspernatur consequatur doloremque excepturi, reprehenderit,
vitae eius similique doloribus? Quae?
</div>
</div>
Use justify-content-between to spread the elements across the start, middle and end section of your column. To push the heading in the middle and the menu to the bottom, just add an empty <div> as first element in your column.
You can find pretty good pictured tutorial on flex-items here.
<div class="row min-vh-100" id="about">
<div class="col-md-6 bg-red d-flex flex-column justify-content-between">
<div class="w-100"> <!-- just an empty box with 100% width --></div>
<div class="text-center">
<h2>ABOUT</h2>
</div>
<div class="d-flex flex-column justify-content-end">
<div class="text-center">
<ul>
<li>about me /</li>
<li>projects /</li>
<li>contact</li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero expedita
ea assumenda aperiam? Nam atque dolorum aut quo,
magni voluptatum aspernatur consequatur doloremque excepturi, reprehenderit,
vitae eius similique doloribus? Quae?
</div>
</div>
Having trouble implementing Bootstrap Grid System on Rails
I created a partial for sidebar so I wouldn't have to copy it to all of my views. The solution I went for in my
application.html.erb
<div class="container-fluid">
<div class="row-fluid">
<div class="col-lg-8"><%= yield %></div>
<div class="col-md-4"><%= render 'layouts/sidebar' %></div>
</div>
<!-- /.row -->
</div>
index.html.erb (start)
<!-- Page Content -->
<div class="container">
<div class="row">
<!-- Blog Entries Column -->
<div>
<h1 class="my-4">Page Heading
<small>Secondary Text</small>
</h1>
<!-- Blog Post -->
<div class="card mb-4">
<img class="card-img-top" src="http://placehold.it/750x300" alt="Card image cap">
<div class="card-body">
<h2 class="card-title">Post Title</h2>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis aliquid atque, nulla? Quos cum ex quis soluta, a laboriosam. Dicta expedita corporis animi vero voluptate voluptatibus possimus, veniam magni quis!</p>
Read More →
</div>
<div class="card-footer text-muted">
Posted on January 1, 2017 by
Start Bootstrap
</div>
</div>
_sidebar.html.erb
<div>
<!-- Search Widget -->
<div class="card my-4">
<h5 class="card-header">Search</h5>
<div class="card-body">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Go!</button>
</span>
</div>
</div>
</div>
Current Problem
What it should look like--
https://blackrockdigital.github.io/startbootstrap-blog-post/
Solved it by replacing row-fluid from my application.html.erb with just row. If someone could explain to me why that was happening that would really help me a lot on my journey in learning web application development. Thanks!
Question: In a Bootstrap Tabs panel, how can we display an MVC View page in the corresponding tab-content area?
Details: Following example (taken from here) works fine in my ASP.NET MVC Core project. But, using anchor tag helper I want to call an action method when user clicks on a tab; when I do that I get the following error. For example, I get this error when in tab Menu 1 I use asp-controller and asp-action attributes as follows. I know the error is related to href attribute that is related to the corresponding tab contents. Is there a workaround so we can still call an action method when a tab is clicked?:
Error:
Cannot override the 'href' attribute for <a>.
Error is on this line: <li><a data-toggle="tab" href="#menu1" asp-controller="myController asp-action="myAction">Menu 1</a></li>
Following works if anchor tag helper is not used:
<div class="container">
<h2>Dynamic Tabs</h2>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
<li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Menu 3</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>
What you need to do is to call #Html.RenderAction() inside the required tab content. Leave the href as they are, there purpose is only to show the corresponding tab based on tab id.
See the following Question:
Create controller for partial view in ASP.NET MVC
i read the documentation, tried to comprehend the demo but still no custom scrollbar.
Basically i copied the demo-code from iScroll-Custom-Scrollbar:
HTML
<div class="demo-page" data-role="page" id="test-page">
<div data-role="header">
<h1>Header</h1>
</div><!-- /header -->
<div data-iscroll="" data-role="content" id="wrapper">
<div class="iscroll-pulldown"></div><!--iScroll-Pulldown-->
<ul data-role="listview" id="thelist">
<li>Item 1 culpa aut nam qui</li>
<li>Item 2 minima quam temporibus quidem</li>
<li>Item 3 commodi sint facilis numquam</li>
</ul>
</div><!--wrapper-->
</div><!--page-->
Script
<script type="text/javascript">
var myScroll;
myScroll = new iScroll('wrapper', { scrollbarClass: 'myScrollbar' });
</script>
Actually a class-attribute should be added to the scrollbar's div but it doesnt.
After trying to squeeze the bar to the death ;) i found out that the class is added as soon as the screen's height is very small and disappears when it gets bigger again. Pretty funny to watch...drives me crazy :D
It looks like you are initializing the iscrollview improperly.
Try this instead
<div class="demo-page" data-role="page" id="test-page">
<div data-role="header">
<h1>Header</h1>
</div><!-- /header -->
<div data-role="content" data-iscroll='{"scrollbarClass": "myScrollbar"}'>
<div class="iscroll-pulldown"></div><!--iScroll-Pulldown-->
<ul data-role="listview" id="thelist">
<li>Item 1 culpa aut nam qui</li>
<li>Item 2 minima quam temporibus quidem</li>
<li>Item 3 commodi sint facilis numquam</li>
</ul>
</div><!--wrapper-->
</div><!--page-->
Now ditch the code in the script tags, it is unneeded.
The whole point of using the iscrollview is so you don't need to do anything in javascript. You can setup a simple iscroller by just including the data-iscroll attribute to a div. If you want to add more customized iscroll features, include it in quotes after data-iscroll=
You also don't need to specify a wrapper element because the iscrollview plugin will automatically create one for you.
I've been trying to create a basic portfolio such as this one (www.tommyblue.it) using Locomotive CMS,
I've managed to set up all the needed gems and required programs, mongodb, homebrew etc...
However due to the extreme difficulty of finding decent haml or Locomotive CMS documentation (for a newbie) online I'm stuck with it. My goal would be to have running app before the end of the month, crazy uh?
Any help is truly appreciated.
Basically this is what I'm stuck with atm:
{{ 'js.js' | javascript_tag }}
{{ 'main.js' | javascript_tag }}
{{ 'custom.js' | javascript_tag }}
{{ 'jquery-1.7.1.min.js' | javascript_tag }}
{{ 'jquery.easing.1.3.js' | javascript_tag }}
{{ 'jquery.masonry.min.js' | javascript_tag }}
{{ 'jquery.prettyPhoto.js' | javascript_tag }}
{{ 'jquery.quicksand.js' | javascript_tag }}
{{ 'jquery.tweet.js' | javascript_tag }}
{{ 'modernizr.js' | javascript_tag }}
{{ 'style.css' | stylesheet_tag }}
{{ 'font.css' | stylesheet_tag }}
{{ 'prettyPhoto.css' | stylesheet_tag }}
{{ 'reset.css' | stylesheet_tag }}
{{ 'typography.css' | stylesheet_tag }}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
{{ Design.Diverso }}
</head>
<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
<!--[if IE 7 ]> <body class="ie7"> <![endif]-->
<!--[if IE 8 ]> <body class="ie8"> <![endif]-->
<!--[if IE 9 ]> <body class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <body> <!--<![endif]-->
<div class="body-inside">
<!-- begin header -->
<header id="header">
<!-- begin slider -->
<div id="f_slider">
<div class="slider">
<ul>
<li>
<div class="row">
<h5>HELLO,</h5>
<h2>WELCOME TO <span class="h_black">NONAME</span></h2>
</div>
<div class="row">
<h4>
Enjoy our company For the design & production of all manner of digital creative.
</h4>
</div>
</li>
<li>
<div class="row text-center">
<h2>Enjoy <span class="h_black"> our </span>company </h2>
</div>
<div class="row one-half text-right">
<h4>Who we are</h4>
<div class="content_big">
Lorem ipsum dolor sit amet, consecadipiscing elit. Duis nec purus tellus, quis pulvinar tortor.
Lorem ipsum dolor sit amet, consecadipiscing elit.
</div>
</div>
<div class="row one-half last">
<h4>What we've done</h4>
<div class="content_big">
Lorem ipsum dolor sit amet, consecadipiscing elit. Duis nec purus tellus, quis pulvinar tortor.
Lorem ipsum dolor sit amet, consecadipiscing elit.
</div>
</div>
<span class="clear"></span>
</li>
<li>
<div class="row one-half text-right">
<h2> we make </h2>
<h2> it <span class="h_black">better</span></h2>
</div>
<div class="row one-half last">
<h4>Lorem ipsum dolor</h4>
<div class="content_big">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pulvinar, odio eu consectetur porta, libero orci tempor felis, a adipiscing diam ipsum in enim. Donec hendrerit dictum quam, a tincidunt neque vulputate nec.
<div>
{{ 'html5_logo.png' | theme_image_tag }}
{{ 'css3_logo.png' | theme_image_tag }}
{{ 'jquery_logo.png' | theme_image_tag }}
</div>
<span class="clear"></span>
</li>
</ul>
</div>
</div>
<!-- end slider -->
<!-- begin navigation -->
<nav id="top_menu">
<div class="inside">
<!-- logo -->
<a href="#" class="logo">
{{ 'logo.png' | theme_image_tag }}
</a>
<!-- begin menu -->
<ul class="menu">
<li>
<a href="index.html">
Home
</a>
</li>
<li>
<a href="works.html">
Works
</a>
</li>
<li>
<a href="blog.html">
Blog
</a>
<ul>
<li>Single Post</li>
</ul>
</li>
<li>
<a href="services.html">
Services
</a>
</li>
<li>
About Us
</li>
<li>
<a href="#">
Features
</a>
<!-- begin sub menu -->
<ul>
<li>
<a href="typography.html">
Typography
</a>
</li>
<li>
<a href="columns.html">
Columns
</a>
</li>
<li>
<a href="elements.html">
Elements
</a>
</li>
<li>
<a href="team.html">
Our Team
</a>
</li>
</ul>
</li>
<li>
<a href="contact.html">
Contact
</a>
</li>
</ul>
<!-- end menu -->
</div>
</nav>
<!-- end navigation -->
</header>
<!-- end header -->
<!-- begin main -->
<article id="main">
<!-- Begin ajax menu -->
<nav id="to-top-menu">
<span></span>
</nav>
<!-- end ajax menu -->
<ul class="fast_link">
<li class="">
<div class="link_wrap" data-link="works">
<div class="link_title">
<h2>OUR WORKS</h2>
<p>Recent Projects</p>
</div>
{{ 'a_works.png' | theme_image_tag }}
{{ 'a_works_hover.png' | theme_image_tag }}>
<span class="call_ajax"></span>
</div>
</li>
<li class="">
<div class="link_wrap" data-link="blog">
<div class="link_title">
<h2>BLOG</h2>
<p>From the Blog</p>
</div>
{{ 'a_blog.png' | theme_image_tag }}
{{ 'a_blog_hover.png' | theme_image_tag }}
<span class="call_ajax"></span>
</div>
</li>
<li class="">
<div class="link_wrap" data-link="services">
<div class="link_title">
<h2>SERVICES</h2>
<p>What we do</p>
</div>
{{ 'a_service.png' | theme_image_tag }}
{{ 'a_service_hover.png' | theme_image_tag }}
<span class="call_ajax"></span>
</div>
</li>
<li class="">
<div class="link_wrap" data-link="team">
<div class="link_title">
<h2>THE TEAM</h2>
<p>Meat the team </p>
</div>
{{ 'a_team.png' | theme_image_tag }}
{{ 'a_team_hover.png' | theme_image_tag }}
<span class="call_ajax"></span>
</div>
</li>
<li class="last">
<div class="link_wrap" data-link="contact">
<div class="link_title">
<h2>CONTACT</h2>
<p>Get in touch</p>
</div>
{{ 'a_contact.png' | theme_image_tag }}
{{ 'a_contact_hover.png' | theme_image_tag }}
<span class="call_ajax"></span>
</div>
</li>
</ul>
<span class="clear"></span>
<!-- home page title -->
<nav class="page_title displaynone">
<h2>
<span class="title">PLACE SELECT A PAGE</span>
<span class="loading_link"></span>
</h2>
</nav>
<!-- callback ajax content -->
<section id="content">
</section>
<span class="clear"></span>
</article>
<!-- end main -->
</div>
<!-- end body inside -->
<!-- begin footer -->
<footer id="footer">
<div class="inside">
<div class="footer-widget">
<div class="one-third">
<h2>Follow Us</h2>
<p>
Omnes enim peccaverunt et egent gloriam Dei. In principio creavit Deus caelum et terram.
</p>
<ul class="footer-socials">
<li class="rss"></li>
<li class="twitter"></li>
<li class="facebook"></li>
<li class="dribbble"></li>
<li class="vimeo"></li>
<li class="skype"></li>
</ul>
<span class="clear"></span>
</div>
<div class="one-third">
<h2>About Us</h2>
<p>{{ 'logo.png' | theme_image_tag }}Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pulvinar, odio eu consectetur porta, libero orci tempor felis, a adipiscing diam ipsum in enim. Donec hendrerit dictum quam, a tincidunt neque vulputate nec. Proin nec sollicitudin augue. Donec hendrerit</p>
</div>
<div class="one-third last">
<h2>Join our newsletter</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pulvinar, odio eu consectetur porta, libero orci tempor felis.</p>
<form id="form_newslatter">
<input type="text" name="newslatter" id="newslatter" placeholder="Email Address..." />
</form>
</div>
<span class="clear"></span>
</div>
<div class="footer-bottom">
<span class="copyright">© 2012 · AGT NoName ( Valid html5 ) All Rights Reserved</span>
<nav id="footer_menu">
<ul>
<li>Home</li>
<li>Works</li>
<li>Blog</li>
<li>Services</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</footer>
<!-- end footer -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
</body>
</html>
You might want to use twitter bootstrap as your theme for it includes a pretty nice and lighweight carousel and create a Photos model with a file and description fields then in your page implement somthing like this in locomotive:
{% for photo in contents.photos %}
<li>
{{ photo.fichier.url | image_tag }}
</li>
{% endfor %}
This is an example, don't just copy and paste since I'm using this with fundation as a theme and lightbox for photos.
Let me know if you need further explanation (I don't have time right now).
I think you should read this stuff carefully http://doc.locomotivecms.com/installation/getting_started
Also I have the clue you are mixing 2 things at this very moment:
CMS is explained as Content Management System therefor you will be able to Manage your Content with this System ;)
Ruby on rails is the main web development tool you use to build the housing of your website in the so called server side and client side.
So try to make a website in Ruby on Rails first. then add your CMS system to it and that should do it.