I am having an issue with Foundation 6 and off-canvas. I have tested multiple imports of Foundation's full JS file and even disabled all other site javascript files. For some reason, when clicking the data toggle button, no javascript is firing to open the off canvas portion. I can manually trigger it using the console just fine. Was hoping someone could look over my HTML and see if I am missing something that wasn't included in the documents.
<div class="off-canvas-wrapper">
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
<div class="off-canvas position-right" id="offCanvasNav" data-off-canvas>
<ul>
<li>Test</li>
<li>Test</li>
</ul>
</div>
<div class="off-canvas-content" data-off-canvas-content>
<header class="site-header">
<div class="row">
<div class="small-10 small-order-1 medium-3 medium-order-1 columns align-middle">
<a id="header-logo" href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img class="site-logo" src="<?php echo get_theme_mod( 'station-logo' ); ?>">
</a>
</div>
<div class="small-2 small-order-2 medium-1 medium-order-3 columns nav-icon-wrap">
<button type="button" class="button" data-toggle="offCanvasNav">Open Menu</button>
</div>
<div class="small-10 small-order-3 medium-8 medium-order-2 columns align-middle">
<div class="row">
<?php get_template_part( 'parts/header/audio-player' ); ?>
</div>
</div>
</div>
<?php get_template_part( 'parts/header/alert-bar' ); ?>
</header>
Related
I've this html page. I'm trying to extract the following information of this div:
<div class="clearfix">
<div class="container left">
<div class="logo">
<a href="/teams/belarus/fc-bate-borisov/200/">
<img src="http://cache.images.core.optasports.com/soccer/teams/150x150/200.png" alt="FC BATE Borisov" />
</a>
</div>
</div>
<div class="container middle">
<div class="details clearfix">
<dl>
<dt>Gara</dt>
<dd>Premier League</dd>
<dt>Data</dt>
<dd><span class='timestamp' data-value='1466877600' data-format='d mmmm yyyy'>25 giugno 2016</span></dd>
<dt>Game week</dt>
<dd>14</dd>
<dt>calcio di inizio</dt>
<dd>
<span class='timestamp' data-value='1466877600' data-format='HH:MM'>20:00</span>
(<span class="game-minute">FP'</span>)
</dd>
</dl>
</div>
<div class="details clearfix">
<dl>
<dt>Stadio</dt>
<dd>Borisov Arena (Barysaw (Borisov))</dd>
</dl>
</div>
</div>
<div class="container right">
<div class="logo">
<a href="/teams/belarus/fc-vitebsk/204/">
<img src="http://cache.images.core.optasports.com/soccer/teams/150x150/204.png" alt="FC Vitebsk" />
</a>
</div>
</div>
</div>
</div>
</div>
</div>
in particular the tab calcio di inizio - game week - stadio
Actually I've tried this regex: <div[^<>]*class="clearfix"[^<>]*>(?<content>.*?)
but when I test it on https://regex101.com/ I can't run the regex.
I think that the class of the div is associated on multiple divs, so this could be the problem.
And also the doesn't have any class for take it, any idea?
If you add an id to the div you want to get the contents of (for example "myDiv"), you could run the following javascript function to return it's HTML contents:
document.getElementById("myDiv").innerHTML
I am not exactly sure if this is what you want, since its not regex, but if so, I hope this helps!
I'm using JointsWP with Foundation 6 in Flex mode. I'm trying to contain the top bar to the grid, which is working with "row column", but I can't align the top-bar-right to the right for some unknown reason. This is my code:
<div class="title-bar" data-responsive-toggle="top-bar-menu" data-hide-for="<?php echo $breakpoint ?>">
<button class="menu-icon" type="button" data-toggle></button>
</div>
<div class="top-bar" id="top-bar-menu">
<div class="row column">
<div class="top-bar-left show-for-<?php echo $breakpoint ?>">
<ul class="menu">
<li><?php bloginfo('name'); ?></li>
</ul>
</div>
<div class="top-bar-right align-right">
<?php joints_top_nav(); ?>
</div>
</div>
</div>
And this is how it looks:
How can I make sure that the menu is aligned to the right?
This is a Foundation bug (not JointsWP specific) that is going to be addressed in the 6.2.1 release.
https://github.com/zurb/foundation-sites/issues/8409
I'm playing with foundation framework and i'm trying to make a simple login form with it.
Here's my markup
<form>
<div class="row">
<div class="large-4 columns">
<div class="panel">
<div class="row">
<div>
<label>Login: <input type="text" placeholder="Login">
</div>
</div>
<div class="row">
<div>
<label>Senha <input type="password">
</div>
</div>
<div class="row">
<input type="submit" value="OK" class="tiny button right">
Esqueci minha senha
</div>
</div>
</div>
</div>
</form>
But at the bottom of it, there's some space created.
How can i remove this space?
The space you are talking about is created by the buttons bottom margin. To remove it simply add a CSS class like such:
.panel .button { margin-bottom: 0; }
Working example: JSFIDDLE
Why I can't thing a view like part of a module?.
In .NET you have the view and the code behind. Sometimes we need to do somehing that match with this logic like grid with a widget inside each cell. Usually a widget have a little nice box with a title and the content, with a little logic, how I can include a partial like that to another view like that.
#extends('jarvis.admin._layouts.default')
#section('title')
Dashboard
#stop
#section('main')
<div class="row-fluid">
<div class="span4">
#yield('first')
<div class="jarviswidget" id="widget-id-00">
<header>
<h2>{{ $widget['title'] }}</h2>
</header>
<div>
<div class="jarviswidget-editbox">
<div>
<label>{{ ucfirst(Lang::get('strings.title')) }}:</label>
<input type="text">
</div>
<div>
<label>{{ ucfirst(Lang::get('strings.style')) }}</label>
<span data-widget-setstyle="red" class="red-btn"></span>
<span data-widget-setstyle="green" class="green-btn"></span>
<span data-widget-setstyle="purple" class="purple-btn"></span>
<span data-widget-setstyle="black" class="black-btn"></span>
<span data-widget-setstyle="darkgrey" class="darkgrey-btn"></span>
</div>
</div>
<div class="jarviswidget-timestamp"></div>
<div class="inner-spacer">
<!-- content goes here -->
#yield('wg_content')
Content
</div>
</div>
</div>
</div>
<div class="span4">
#yield('second')
<div class="jarviswidget" id="widget-id-00">
<header>
<h2>{{ $widget['title'] }}</h2>
</header>
<div>
<div class="jarviswidget-editbox">
<div>
<label>{{ ucfirst(Lang::get('strings.title')) }}:</label>
<input type="text">
</div>
<div>
<label>{{ ucfirst(Lang::get('strings.style')) }}</label>
<span data-widget-setstyle="red" class="red-btn"></span>
<span data-widget-setstyle="green" class="green-btn"></span>
<span data-widget-setstyle="purple" class="purple-btn"></span>
<span data-widget-setstyle="black" class="black-btn"></span>
<span data-widget-setstyle="darkgrey" class="darkgrey-btn"></span>
</div>
</div>
<div class="jarviswidget-timestamp"></div>
<div class="inner-spacer">
<!-- content goes here -->
#yield('wg_content')
Content
</div>
</div>
</div>
</div>
<div class="span4">
#yield('third')
<div class="jarviswidget" id="widget-id-00">
<header>
<h2>{{ $widget['title'] }}</h2>
</header>
<div>
<div class="jarviswidget-editbox">
<div>
<label>{{ ucfirst(Lang::get('strings.title')) }}:</label>
<input type="text">
</div>
<div>
<label>{{ ucfirst(Lang::get('strings.style')) }}</label>
<span data-widget-setstyle="red" class="red-btn"></span>
<span data-widget-setstyle="green" class="green-btn"></span>
<span data-widget-setstyle="purple" class="purple-btn"></span>
<span data-widget-setstyle="black" class="black-btn"></span>
<span data-widget-setstyle="darkgrey" class="darkgrey-btn"></span>
</div>
</div>
<div class="jarviswidget-timestamp"></div>
<div class="inner-spacer">
<!-- content goes here -->
#yield('wg_content')
Content
</div>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
</div>
</div>
#stop
Where each #yield will load a small widget processing the little logic or even another template with another nested views.
For example #yield('first') will load a box that is another template with a yield inside, and a variable as title. This nested yield will have another yield or the content... then the same box we use for the box will be used another time to render #yield('second') with another title and another content, that maybe use the same as the first yield.
I don't understand how to make this cascade with blade template system. Is there a way to do something similar?
I know is complicated but if you ever used .net, you could understand what I mean.
Thanks and sorry for my english.
Do that have similarities with the HMVC model, but is not the same.
I found the solution...
Is a little complicated to explain here but I'm going to do my best.
Try this:
default template (default.blade.php)
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<div class="fluid-container">
#yield('main')
</div>
</body>
</html>
default content template (mypage.blade.php)
#extends('_layouts.default')
#section('main')
<div id="widget-grid">
<div class="row-fluid">
<article class="span12">
#include('_modules.mymodule')
</article>
</div>
</div>
#stop
module template (mymodule.blade.php)
We send some variables to the shared template widget
#extends('admin._partials.widget', array('widget' => array('title' => 'title', 'id' => 'some_id', 'style' => 'your: style')))
#section('wg_content')
<!-- Your widget content goes here -->
#overwrite
shared template (widget.blade.php)
Your title $widget['title']
Your id $widget['id']
Your style $widget['style']
<!-- content -->
#yield('wg_content')
The views directory tree would be:
views
_layouts
default.blade.php
_partials
widget.blade.php
_modules
mymodule.blade.php
page
mypage.blade.php
Now when you make the view from the controller you should call mypage.
The magic directive is #overwrite in the bottom of module template.
Now when you call the module, the system get the widget template and wrap mymodule, then add this to the page and finally wrap everything within default which is the main template.
This help you to share a template with others. I know you have question, ASK! XD
In Rails 3.2 I was able to rename a extension to .handlebars.erb in order to be able to use erb tags (mainly <%= image_tag 'image.jpg' %>) in my handlebars templates.
I'm unable to get this going in Rails 4. Im using
gem 'ember-rails'
gem 'handlebars-source'
The error I'm getting:
undefined method `image_tag'
The view in question is the one below, same for any other view:
<div class="row-fluid">
<div class="span12">
<div class="row-fluid distance_0">
<div class="row-fluid divider slide_divider base_color_background">
<div class="container">
<span class="bottom_arrow"></span>
</div>
</div>
<!-- Title and Description -->
<div class="row-fluid slide_content fullwidth">
<div class="container">
<div class="row-fluid text_bar_pattern themeple_sc">
<div class="content_bar">
<h3>
</h3>
<p>
</p>
</div>
{{#linkTo "user.new" class="button_bar"}}{{/linkTo}}
</div>
</div>
</div>
<div class="row-fluid">
<div class="container">
<div class="bottom_shadow_full"></div>
</div>
</div>
<div class="row-fluid distance_2"></div>
<div class="row-fluid distance_2"></div>
<div class="row-fluid">
<div class="container">
<img src="images/old_letters_blur.jpg" alt="">
</div>
</div>
<%= image_tag 'old_letters_blur.jog' %>
<!-- TextBar -->
<!-- TextBar End -->
</div>
</div>
</div>
Any suggestions?