I am currently working with Bigcommerce's Built-in Blog. Everything is working fine now except the pagination. I tried to remove and bring it back and I even tried to place it on the bottom of the page. But still not working. I am not good with jQuery nor JavaScript, so please bear with me. Here's the existing code that I am currently working on:
the website's link is here:
http://abulafia4.mybigcommerce.com/blog/
<body class="blog" id="blog-main">
<!-- Facebok Plugin -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.10";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- added this for the custom css of the blog page -->
<link href="%%Asset_Styles/custom-blog.css%%" rel="stylesheet" type="text/css" />
<link href="%%Asset_Styles/bootstrap.min.css%%" rel="stylesheet" type="text/css" />
<div class="page-wrap">
%%Panel.Header%%
<div class="container">
<div class="row">
%%Panel.WrapperBanner%%
<div class="col-lg-9 col-md-9 col-sm-12">
<h1 class="TitleHeading">%%GLOBAL_BlogName%%</h1><!-- built in blog codes started here -->
<div class="PageContent">
%%SNIPPET_RecentPostsContent%%
<div class="product-nav btm">
<div class="Moveable Panel PagingBottom" id="CategoryPagingBottom">
<div class="CategoryPagination BloggingPagination" >
<ul class="pagination">
<li>Pages</li>
AAAAAAAA
<!-- %%GLOBAL_SectionPaging%%
%%GLOBAL_SectionPagingPrevious%%
%%GLOBAL_SectionPagingNext%% -->
</ul>
</div>
</div>
<br class="Clear">
</div>
</div><!-- built in blog codes ends here -->
</div>
<div class="col-lg-3 col-md-3 col-sm-12 sidebar-border">
<div class="row">
<!-- SEARCH BAR FOR BLOG ARTICLE -->
<div class="col-lg-12 col-md-12 col-sm-12 sidebar-widget">
%%Panel.BlogRecentPosts%%
</div>
<div class="clear"></div>
<div class="col-lg-12 col-md-12 col-sm-12 sidebar-widget">
%%Panel.FacebookPlugin%%
</div>
<div class="clear"></div>
<div class="col-lg-12 col-md-12 col-sm-12 sidebar-widget">
%%Panel.FollowUs%%
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<!-- Sidebar -->
%%Panel.Footer%%
</div>
<!-- Go to www.addthis.com/dashboard to customize your tools --> <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-59ccab5868d78bdc"></script>
</body>
</html>
Related
I have a layout with three rows. I would like the first row to have one column that spans all 12 columns at the xs size. At larger sizes I would like two columns, one 9 columns wide and one 3 columns wide. I have attempted this by adding the second column and making it hidden at xs and visible and 3 wide at sm.
However, doing so breaks the layout of my second row at larger screen sizes for some reason. I'm not sure why.
Code working before adding hidden column:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="../styles/StyleSheet1.css" rel="stylesheet" />
<title></title>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="col-xs-12">
<div id="header">
<h1>This will be the page header</h1>
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li>Page w/o Sidebar</li>
<li>Menu Item 3</li>
</ul>
</div>
</div>
</div>
<div class="row-fluid">
<div class="col-xs-6 col-sm-3 col-sm-push-9">
<div id="side-bar">
This is the side bar
<ul class="list-group">
<li class="list-group-item active">item a</li>
<li class="list-group-item">item b</li>
<li class="list-group-item">item c</li>
</ul>
</div>
</div>
<div class="col-xs-12 col-sm-9 col-sm-pull-3">
<div id="content">
<h2>This is the main content</h2>
</div>
</div>
</div>
<div class="row-fluid">
<div class="col-xs-12">
<div id="footer">
This is the footer
</div>
</div>
</div>
</div>
</body>
</html>
Code broken after adding hidden column:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="../styles/StyleSheet1.css" rel="stylesheet" />
<title></title>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="col-xs-12 col-sm-9">
<div id="header">
<h1>This will be the page header</h1>
<ul class="nav nav-tabs">
<li class="active">Home
</li>
<li>Page w/o Sidebar
</li>
<li>Menu Item 3
</li>
</ul>
</div>
</div>
<div class="hidden-xs col-sm-3 visible-sm ">
</div>
</div>
<div class="row-fluid">
<div class="col-xs-6 col-sm-3 col-sm-push-9">
<div id="side-bar">
This is the side bar
<ul class="list-group">
<li class="list-group-item active">item a</li>
<li class="list-group-item">item b</li>
<li class="list-group-item">item c</li>
</ul>
</div>
</div>
<div class="col-xs-12 col-sm-9 col-sm-pull-3">
<div id="content">
<h2>This is the main content</h2>
</div>
</div>
</div>
<div class="row-fluid">
<div class="col-xs-12">
<div id="footer">
This is the footer
</div>
</div>
</div>
</div>
</body>
</html>
I seem to have figured out the solution. I'm setting the column that I want hidden as visible on small, medium, and large, and setting it to 3 columns on small screens or larger.
I also added a div between the rows with the clearfix class.
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="col-xs-12 col-sm-9">
<div id="header">
<h1>This will be the page header</h1>
<ul class="nav nav-tabs">
<li class="active">Home
</li>
<li>Page w/o Sidebar
</li>
<li>Menu Item 3
</li>
</ul>
</div>
</div>
<div class="visible-sm visible-md visible-lg col-sm-3">
<div id="logo">
<p>This is the hidden area</p>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="row-fluid">
<!-- rest of the code from before -->
um developing a website and that should has few tabs according to my dream,
but thing is when I click a tab it shows only contents which is between heading tag,not P tags,
Here's my code.please help me to fulfill my dream :-D
<div class="panel panel-default">
<div class="panel-body tabs">
<ul class="nav nav-pills" data-tabs="tabs">
<li class="active">Tab1
</li>
<li>Tab2
</li>
<li>Tab3
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1">
<h4>Heading1</h4>
<p>text</p>
</div>
<div class="tab-pane fade" id="tab2">
<h4>Heading2</h4>
<p>text</p>
</div>
<div class="tab-pane fade" id="tab3">
<h4>Heading3</h4>
<p>text</p>
</div>
</div>
</div>
</div>
I think you were missing the jQuery link.
The code works.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="panel panel-default">
<div class="panel-body tabs">
<ul class="nav nav-pills" data-tabs="tabs">
<li class="active">Tab1
</li>
<li>Tab2
</li>
<li>Tab3
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1">
<h4>Heading1</h4>
<p>text in p</p>
</div>
<div class="tab-pane fade" id="tab2">
<h4>Heading2</h4>
<p>text in p</p>
</div>
<div class="tab-pane fade" id="tab3">
<h4>Heading3</h4>
<p>text in p</p>
</div>
</div>
</div>
</div>
Output :
You need to Enable tabbable tabs via JavaScript
<script>
$('.nav-pills a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
</script>
I'm working on a project that reads a URL and then goes to the link and reads the data. Its a text hosting website (TextUploader.com) But when it downloads the site. I only want the data from the text that I have put there. When I download the Link and send it to the RichTextBox1 this is what i get
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>'HPTjNRgUfG' | TextUploader.com</title>
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<link rel="icon" type="image/ico" href="http://textuploader.com/favicon.ico">
<meta property="og:title" content="HPTjNRgUfG" xmlns="http://www.w3.org/1999/html"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="http://textuploader.com/5jx4u"/>
<meta property="og:site_name" content="textuploader.com - HPTjNRgUfG"/>
<meta property="og:description" content="Please call back later <a href=" http://philadelphiaexplorers.org/about-the-explorers-club/#annual ">a..."/>
<link rel="canonical" href="http://textuploader.com/5jx4u"/>
<!-- bootstrap framework css -->
<link media="all" type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.0/css/bootstrap.min.css">
<link media="all" type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.0/css/bootstrap-responsive.min.css">
<!-- power tooltips -->
<link media="all" type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery-powertip/1.1.0/jquery.powertip.css">
<!-- main stylesheet -->
<link media="all" type="text/css" rel="stylesheet" href="http://textuploader.com/assets/css/beoro.css">
<link media="all" type="text/css" rel="stylesheet" href="http://textuploader.com/assets/css/tu_custom.css">
<!--[if lte IE 8]><link media="all" type="text/css" rel="stylesheet" href="http://textuploader.com/assets/css/ie8.css">
<![endif]-->
<!--[if IE 9]><link media="all" type="text/css" rel="stylesheet" href="http://textuploader.com/assets/css/ie9.css">
<![endif]-->
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2pre/html5shiv.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/flot/0.7/excanvas.min.js"></script>
<![endif]-->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36314765-1']);
_gaq.push(['_setDomainName', 'textuploader.com']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<link media="all" type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/7.3/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/7.3/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body class="bg_c">
<div id="fb-root"></div>
<script>(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=456470037742170";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- main wrapper (without footer) -->
<div class="main-wrapper">
<!-- top bar -->
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<div class="pull-right top-search">
</div>
<div id="fade-menu" class="pull-left">
<ul class="clearfix" id="mobile-nav">
<li>Home</li>
<li>Discover</li>
<li>Help</li>
<li>Developers</li>
<li>Contact</li>
<li><a href='https://textuploader.com/profile'>My Account</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- header -->
<header>
<div class="container">
<div class="row">
<div class="span3">
<!-- <div class="main-logo"><a href="http://textuploader.com/"><img src="http://textuploader.com/assets/img/textuploader_logo.png" alt="TextUploader.com"></div> -->
<div class="main-logo"></div>
</div>
<div class="span5">
<nav class="nav-icons">
<!-- small icons navigation -->
</nav>
</div>
<div class="span4">
<div class="user-box">
<div class="user-box-inner">
<img src="//www.gravatar.com/avatar/d41d8cd98f00b204e9800998ecf8427e?s=80&r=g&d=mm" class="user-avatar img-avatar" alt="Gravatar"/>
<div class="user-info">
Create an Account <ul class="unstyled">
<li>Login</li>
<li>·</li>
<li>Password</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- breadcrumbs -->
<div class="container">
<ul id="breadcrumbs">
<li>
<a href="http://textuploader.com/">
<i class="icon-home"></i>
</a></li>
<li>Home</li>
<li>textuploader.com/5jx4u</li>
<li><span>Posted on: 11/16/15 1:59:00 AM UTC</span></li>
</ul>
</div>
<!-- main content -->
<div class="container">
<div class="row-fluid">
<div class="span12">
<div class="w-box w-box-blue">
<div class="w-box-header"><h4>"HPTjNRgUfG" - Views: 2 · Hits: 2 - Type: Public</h4></div>
<div class="w-box-content cnt_a ">
<div class="toolbar clearfix">
<div class="pull-left">
<div class="toolbar-icons clearfix">
<div style="overflow:hidden;width:90px;float:left;">
<div class="fb-like" data-href="http://textuploader.com/5jx4u" data-send="false" data-layout="button_count"
data-width="450" data-show-faces="false"></div>
</div>
<div style="overflow:hidden;width:90px;float:left;">
Tweet
</div>
<div style="overflow:hidden;width:90px;float:left;">
<div class="g-plusone" data-size="medium" data-annotation="none"
data-href="http://textuploader.com/5jx4u"></div>
</div>
<div style="clear:both"></div>
</div>
</div>
<div class="pull-right">
<div class="btn-group">
<button class="btn btn-mini" onClick="parent.location='http://textuploader.com/5jx4u/rev'; void(0);">Revisions (0)</button>
<button class="btn btn-mini" onClick="parent.location='http://textuploader.com/contact'; void(0);">Report Abuse</button>
</div>
</div>
</div>
<pre><code class='no-highlight'>Please call back later <a href=" http://philadelphiaexplorers.org/about-the-explorers-club/#annual ">accidently took 2 40 mg paxil</a> "We need that flexibility," Fox said. "When you pick your offensive line, not just for the season, but for game day, you have to pick them from the standpoint of having some flexibility. You've got to have a swing guard/center, you've got to have a swing tackle/guard, for the games."
</code></pre>
</div>
</div>
</div>
</div>
</div>
<div class="footer_space"></div>
</div>
<!-- footer -->
<footer>
<div class="container">
<div class="row">
<div class="span8">
<div>© 2016 Exsom Group, LLC. All Rights Reserved.</div>
</div>
<div class="span4">
<ul class="unstyled">
<!--
<li>TUArmor</li>
<li>·</li>
-->
<li>Terms of Service</li>
<li>·</li>
<li>Privacy Policy</li>
<li>·</li>
<li>DMCA</li>
<li>·</li>
<li>System Status</li>
</ul>
</div>
</div>
</div>
</footer>
<!-- Common JS -->
<!-- jQuery framework -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- bootstrap Framework plugins -->
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.0//js/bootstrap.min.js"></script>
<!-- top menu -->
<script src="http://textuploader.com/assets/js/jquery.fademenu.js"></script>
<!-- top mobile menu -->
<script src="http://textuploader.com/assets/js/selectnav.min.js"></script>
<!-- actual width/height of hidden DOM elements -->
<script src="http://textuploader.com/assets/js/jquery.actual.min.js"></script>
<!-- jquery easing animations -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<!-- power tooltips -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-powertip/1.1.0/jquery.powertip-1.1.0.min.js"></script>
<!-- date library -->
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/1.7.2/moment.min.js"></script>
<!-- common functions -->
<script src="http://textuploader.com/assets/js/beoro_common.js"></script>
<!-- twitter button code -->
<script>!function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https';
if (!d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.src = p + '://platform.twitter.com/widgets.js';
fjs.parentNode.insertBefore(js, fjs);
}
}(document, 'script', 'twitter-wjs');</script>
<!-- +1 code -->
<script type="text/javascript">
(function () {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = '//apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
</body>
</html>
What I want is just the plaintext here:
<pre><code class='no-highlight'>Please call back later <a href=" http://philadelphiaexplorers.org/about-the-explorers-club/#annual ">accidently took 2 40 mg paxil</a> "We need that flexibility," Fox said. "When you pick your offensive line, not just for the season, but for game day, you have to pick them from the standpoint of having some flexibility. You've got to have a swing guard/center, you've got to have a swing tackle/guard, for the games."
</code></pre>
How would I write a simple code to parse only the data Between the " " and "" Above?
You can grab it using Regex if you want.
Tried & Tested
(?s)(<pre>.+?<\/pre>)
That above is the pattern that can be used. If you want to confirm please see that here.
I didn't show you how this can be done in .net as you did not provide us with what you have tried. I could break down the pattern, but the above link does that already.
I'm experiencing something strange, while trying out bootstrap with django. I copied the dashboard-example from the bootstrap-page (dashboard-example) into my django-project to play around a little bit. When I try to use the collapse navbar for smaller screen-sizes, the navbar is appearing, when I click the toggle-button. But if I click the toggle-button again, the navbar is not disappearing. I copied the example from bootstrap one-to-one. Why is the toggle-button not working as expected? Here is the generated html-code:
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Dashboard Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="/static/css/dashboardtest.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="/static/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Dashboard</li>
<li>Settings</li>
<li>Profile</li>
<li>Help</li>
</ul>
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
</form>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active">Overview <span class="sr-only">(current)</span></li>
<li>Reports</li>
<li>Analytics</li>
<li>Export</li>
</ul>
<ul class="nav nav-sidebar">
<li>Nav item</li>
<li>Nav item again</li>
<li>One more nav</li>
<li>Another nav item</li>
<li>More navigation</li>
</ul>
<ul class="nav nav-sidebar">
<li>Nav item again</li>
<li>One more nav</li>
<li>Another nav item</li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1 class="page-header">Dashboard</h1>
<div class="row placeholders">
<div class="col-xs-6 col-sm-3 placeholder">
<img data-src="holder.js/200x200/auto/sky" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
<div class="col-xs-6 col-sm-3 placeholder">
<img data-src="holder.js/200x200/auto/vine" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
<div class="col-xs-6 col-sm-3 placeholder">
<img data-src="holder.js/200x200/auto/sky" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
<div class="col-xs-6 col-sm-3 placeholder">
<img data-src="holder.js/200x200/auto/vine" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
</div>
<h2 class="sub-header">Section title</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/docs.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="/static/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
please put bootstrap CDN in that file:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
I am trying to test that a link dose exist on the page,
I tried to check all the nesting tags that contain the link tag like that:
response.body.should have_selector("div.page_margins div.page div#nav div.hlist ul li#2")
and it passes correctly, but, if I added the link tag to the test like this:
response.body.should have_selector("div.page_margins div.page div#nav div.hlist ul li#2 a",:text => "Next")
I get the error:
expected css "div.page_margins div.page div#nav div.hlist ul li#2 a#next_page"
with text "Next" to return something
If I test it with have_link like this:
response.body.should have_link("div.page_margins div.page div#nav div.hlist ul li#2 a#next_page")
I get the error:
expected link "div.page_margins div.page div#nav div.hlist ul li#2
a#next_page" to return something
Can any body help please ? I love rails, but, I still need a hand to get along with testing ..
EDIT
Here is the page.html, I've noticed that the html in content_for in which the link is rendered is not rendered in yield
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-type">
<title></title>
<script src="/assets/application.js" type="text/javascript"></script><link href="/assets/application.css" media="screen" rel="stylesheet" type="text/css">
<script type="text/javascript">
//<![CDATA[
var auto_log_off = false;
//]]>
</script><script type="text/javascript">
//<![CDATA[
var student_logged = false;
//]]>
</script><script src="/assets/sessions.js" type="text/javascript"></script><!-- add your meta tags here --><link href="/assets/application_yaml/css/my_layout.css" rel="stylesheet" type="text/css">
<!--[if lte IE 7]> <![endif]--><link href="/assets/application_yaml/css/patch_my_layout.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="page_margins">
<div id="topnav">
<!-- start: skip link navigation -->
<a class="skip" href="#navigation" title="skip link">Skip to the navigation</a>
<span class="hideme">.</span>
<a class="skip" href="#content" title="skip link">Skip to the content</a>
<span class="hideme">.</span>
<!-- end: skip link navigation -->
</div>
<!-- start: skip link navigation -->
<!-- end: skip link navigation -->
<div class="page">
<div id="header">
<h1>Welcome to course builder!!</h1>
<p>Home</p>
</div>
<div id="nav">
<!-- skiplink anchor: navigation -->
<a id="navigation" name="navigation"></a>
<div class="hlist">
<!-- main navigation: horizontal list -->
<div class="quiz_review_buttons">
<!--
<ul>
<li class="active"><strong>Button 1</strong></li>
<li>Button 2</li>
<li>Button 3</li>
</ul>
-->
</div>
<!-- <ul> -->
<!-- <li class="active"><strong>Button 1</strong></li> -->
<!-- <li>Button 2</li> -->
<!-- <li>Button 3</li> -->
<!-- <li>Button 4</li> -->
<!-- <li>Button 5</li> -->
<!-- </ul> -->
</div>
</div>
<div id="main">
<div id="col1">
<div class="clearfix" id="col1_content">
<!-- add your content here -->
<div class="debug_div">
<p>
<b>
devise/sessions#new
</b>
</p>
</div>
</div>
</div>
<div id="col3">
<div class="clearfix" id="col3_content">
<!-- add your content here -->
<div class="alert" id="notice_alert">You need to sign in or sign up before continuing.</div>
<script type="text/javascript"></script><!-- <div style="clear:both"></div> --><h2>Sign in for student</h2>
<form accept-charset="UTF-8" action="/students/sign_in" class="student_new" id="student_new" method="post">
<div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"></div>
<div>
<label for="student_email">Email</label><br><input id="student_email" name="student[email]" size="30" type="email" value="">
</div>
<div>
<label for="student_password">Password</label><br><input id="student_password" name="student[password]" size="30" type="password">
</div>
<div>
<input name="student[remember_me]" type="hidden" value="0"><input id="student_remember_me" name="student[remember_me]" type="checkbox" value="1"><label for="student_remember_me">Remember me</label>
</div>
<div><input name="commit" type="submit" value="Sign in"></div>
</form>
Sign up<br>Forgot your password?<br>
</div>
<!-- IE Column Clearing -->
<div id="ie_clearing"> </div>
</div>
</div>
<div id="footer">
Layout based on
YAML
</div>
</div>
</div>
</body>
</html>
"expected to return something" just means that capybara couldn't find the element it was looking for. Hard to say why without seeing the html that capybara is searching
Note that the argument to have_link is not a css selector, it should be the text, id, title, or image alt attribute of the link.
Also, in controller specs, make sure you call render_views when checking markup.
.