I am a newbie to semantic. I am trying out with rating feature but the stars are not showing up.
Here is the plunker code
<div class="card">
<div class="image">
img tag
</div>
<div class="extra">
Rating:
<div class="ui star rating" data-rating="4"></div>
</div>
</div>
You have to add this line:
$('.ui.rating')
.rating()
;
plunker
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!
Might anyone have any idea how to auto-adjust the height of textarea to fill the rest of the space vertically? The easy way is to hard code the style of textarea with height: 300px or something but that is hardly a workable solution in production.
Here is the of my html. Thanks
<body>
<div class="app-page" data-page="home">
<div class="app-topbar">
<div class="app-title">Mobile Email Client</div>
</div>
<div class="app-content">
<div class="app-section">
<div class="app-button" data-target="emailEditor">Compose Email</div>
</div>
</div>
</div>
<div class="app-page" data-page="emailEditor">
<div class="app-topbar">
<div class="app-title"><span class="app-icon"></span>Email Editor</div>
<div class="left app-button" data-back>QUIT</div>
</div>
<div class="app-content">
<div class="app-section" id="editorStatus"></div>
<div class="app-section">
<input class="app-input" id="emailFrom" placeholder="From">
</div>
<div class="app-section">
<input class="app-input" id="emailTo" placeholder="To">
</div>
<div class="app-section">
<input class="app-input" id="emailSubject" placeholder="Subject">
<textarea class="app-input" id="emailMessage" placeholder="Message" rows="10"></textarea>
<div class="app-button green app-submit" id="emailSend">Send</div>
</div>
</div>
</div>
In App.js apparently setting rows="10" attribute for <textarea> is not enough. The <textarea> must also be given a CSS height: auto;
This still does NOT enable you to fill the remainder of the screen dynamically for any sized screens.
I just wanna know the correct class to use for divs..currently my index page content divs look as below:
This is okay for dekstop view, I used class="large-4 columns" for the above. But I want something like below for tablet and mobile view.
How do I achieve this plz?
I TRIED but din't work as i wanted.
<div class="large-4 columns">
<div class="medium-2 columns">
<img src="images/launch-home.png" alt="" height="60px;" />
</div>
<div class="medium-10 columns">
<h1>LAUNCH OF THE XXXX</h1>
XXXXX, a pioneering voluntary industry-wide initiative that is dedicated to the development and advocacy of professional standards, including ethical standards, was launched on 24 September 2014. The event was officiated by both the Governor of Bank Negara Malaysia and Chairman of the Securities Commission Malaysia and was attended by leaders of the financial services industry.
</div>
</div>
If your settings has 12 total columns it should be like this:
<div class="row">
<div class="medium-12 large-4 columns">
<!--inaugural-->
</div>
<div class="medium-12 large-4 columns">
<!--launch-->
</div>
<div class="medium-12 large-4 columns">
<!--insights-->
</div>
</div>
I think your first tag is not at good place
<div class="row">
<div class="large-12 columns">LARGE VIEW</div>
<div class="medium-4 columns">
<img src="images/launch-home.png" alt="" height="60px;" />
</div>
<div class="medium-8 columns">
<h1>LAUNCH OF THE XXXX</h1>
...
</div>
</div>
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