I am using Vash as my template engine. I want to have header and footer in a separate file that I want to include in layout.vash
layout.vash
<body>
<header>
#html.block('header')
</header>
#html.block('content')
<footer>
#html.block('footer')
</footer>
<!-- Render Page Specific Scripts Here -->
#html.block("scripts")
</body>
header.vash
#html.block('header', function(){
<!--==============================header=================================-->
<div class="container_12">
<div class="grid_12">
<h1>
<a href="index.html">
<img src="images/logo.png" alt="Your Happy Family">
</a>
</h1>
</div>
</div>
})
index.vash
#html.extend('./includes/layout', function(model){ #html.block('content',
function(model){
<!--==============================Content=================================-->
<div class="content">
</div>
}) })
header and footer templates not pulled in. Any ideas?
Layout.vash:
<body>
<header>
#html.include('partials/header')
</header>
#html.block('content')
<footer>
#html.include('partials/footer')
</footer>
<!-- Render Page Specific Scripts Here -->
#html.block("scripts")
header.vash:
<div class="container_12">
<div class="grid_12">
<h1>
<a href="index.html">
<img src="images/logo.png" alt="Your Happy Family">
</a>
</h1>
</div>
</div>
footer.vash:
<p>Your footer html</p>
Note that the partials folder should be inside the views folder.
Related
How can i make this Scroll to a specific Element Using html in Vue when the ID and element i want to click on are in different component?
<template>
<div class="container">
<div class="section">
<Bio/> <--------------------- inside of this is the text i want to click on
</div>
<div class="section">
<About/>
</div>
<div class="section">
<Gallery/>
</div>
<div class="section">
<Counter/>
</div>
<div class="section">
<Services/> <----------------- Section i want to scroll in after click
</div>
<div class="section">
<Clients/>
</div>
<div class="section">
<Clientslogo/>
</div>
</div>
</template>
As explained here, this is how you can achieve such thing
<template>
<div class="container">
<router-link :to="{ hash: '#services' }">Scroll to Services</router-link>
<div class="section">
<Bio id="bio" /> <!-- inside of this is the text I want to click on -->
</div>
<div class="section">
<About/>
</div>
<div class="section">
<Gallery/>
</div>
<div class="section">
<Counter/>
</div>
<router-link :to="{ hash: '#bio' }">Scroll to Bio</router-link>
<div class="section">
<Services id="services" /> <!-- Section I want to scroll in after click -->
</div>
<div class="section">
<Clients/>
</div>
<div class="section">
<Clientslogo/>
</div>
</div>
</template>
I changed my root.html.heex file to look like this:
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
<%= #inner_content %>
</body>
</html>
And moved the <header> element to be duplicated in app.html.heex:
<header>
<section class="container w-full m-5 p-3 bg-blue-200 text-blue-600 text-5xl font-bold">
<div class="text-2xl">
<a href="/">
<img class="float-left mt-1"
src={Routes.static_path(#conn, "/images/logo.png")} alt="LOGO"/>
<span class="flex text-4xl hover:text-blue-800">
<span class="font-medium nomargin">WEBSITE</span>
</span>
</a>
<span class="float-right flex -mt-8 font-normal">
<nav role="navigation">
<%= render "_user_menu.html", assigns %>
</nav>
</span>
</div>
</section>
</header>
<main class="container">
<p class="alert alert-info" role="alert"><%= get_flash(#conn, :info) %></p>
<p class="alert alert-danger" role="alert"><%= get_flash(#conn, :error) %></p>
<%= #inner_content %>
</main>
...and in live.html.heex.
But I can't render "_user_menu.html" in live.html.heex because (of course) it uses #current_user.
Is there a trick that allows me to somehow have live content on the float-left side of the header and the "_user_menu.html" fragment on the float-right side?
Generally if you need to mix "Live" and "Dead" views/templates, there is live_render/3 documented here. Been there, seen that [working] ;-)
Well my code looks like this:
<header>
<div class="wrapper">
<div class="fixedHeader">
<span>some stuff here like logo and nav element</span>
</div>
<span>another header stuff here</span>
</div>
</header>
<section>
<div class="wrapper">
<span>sections stuff here</span>
</div>
</section>
<section>
<div class="wrapper">
<span>sections stuff here</span>
</div>
</section>
<footer>
<div class="wrapper">
<span>footer stuff here</span>
</div>
</footer>
the <header></header>is 100vh
when I scroll down the div.fixedHeader that is positioned fixed is visible only in the <header> area but it disappears in sections and footer
how can i fix it? i tried the z-index but it's pointless
I am new to selenium and I have got this problem
This is the code
<document>
<html lang="en">
<head>
<body>
<div id="wrapper">
<nav class="navbar navbar-default navbar-static-top" style="margin-bottom: 0; background-color: #003e7e" role="navigation">
<div id="page-wrapper" style="min-height: 163px;">
<div id="content">
<div id="workArea">
<script type="text/javascript"> $(document).ready(function () { $('.linkdisabled').click(function (e) { e.preventDefault(); }); }); </script>
<div class="simpleForm">
<div>
<div class="row">
<div class="col-lg-12">
<h3 class="page-header">TimeSheet</h3>
<h3>
<span class="link_button btn btn-primary" onclick="location.href= '/TimeSheet/Create'">Click to Add Sheet</span>
</h3>
</div>
</div>
<div class="row show-grid">
</div>
</div>
</div>
</div>
</div>
<div id="footer"/>
</body>
</html>
</document>
================================
And I want to click on this
Click to Add Sheet
Have tired almost all that is there in selenium to identify and click it but it didnt worked... please help
Does it work manually? are you able to click on the text??
Reference -> onclick="location.href='link.html'" does not load page in Safari
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.
.