I am utilizing Foundation 5's Magellan to fix a header to the top of the window when the page content is scrolled. However, I am not using arrival points.
Normally my HTML looks like this:
<article>
<header data-magellan-expedition="fixed">
<h3>title</h3>
</header>
</article>
But, when Magellan is fired, the source changes to:
<article>
<header data-magellan-expedition-clone style>
<h3>title</h3>
</header>
<header data-magellan-expedition="fixed" style="position: fixed; top: 0px;">
<h3>title</h3>
</header>
</article>
Foundation allows for an active class to be set, but because I am not using the arrival points, I cannot utilize that functionality.
How do I set a class to the <header data-magellan-expedition="fixed" style="position: fixed; top: 0px;"> only after its fired?
Or, how can I call it specifically in CSS?
Thanks for your help.
It seems the way to do this in css is:
header[style="position:fixed;"] { ... }
Didn't realize it was that easy!
Related
I have this svg
<svg viewBox="0 0 462 40" height="40" width="462" id="lol-text-1" class="lol-text__svg">
<desc>Created with Snap</desc>
<defs>
<linearGradient x1="0" y1="0.3" x2="0" y2="0.8" id="Sikjr46ql1nr">
<stop offset="0%" stop-color="#cbac62"/>
<stop offset="100%" stop-color="#66481f"/>
</linearGradient>
<mask id="Sikjr46ql1nz">
<text x="0" y="35" class="lol-text__mask" style="" fill="#ffffff">Pentakill</text>
</mask>
</defs>
<g style="" mask="url('#Sikjr46ql1nz')">
<text x="0" y="35" class="lol-text__shadow" style="" fill="#ad986a">Pentakill</text>
<text x="1" y="36" class="lol-text__text" style="" fill="url('#Sikjr46ql1nr')">Pentakill</text>
</g>
As it says in the svg code, it was created with snap.
Here is the html tag used to generate the svg:
<span class="lol-text" style="display: none;">Pentakill</span>
I asume that the style="display: none;" was inserted after the svg was generated.
What i need is an example on how do i generate the same svg from an html tag using snap.svg or svg.js
Thank you!
Snap.svg will help you generate graphics, but it can also work with existing SVG. This means that your SVG content does not necessarily have to be created with Snap.svg, you're also free to manipulate graphics created with tools like Adobe Illustrator, Inkscape, or Sketch.
Here are some examples, which you can also find on the Demo section of their website.
<html>
<head>
<meta charset="utf-8" />
<title>Sample snapsvg</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.2.0/snap.svg-min.js"></script>
</head>
<body>
<script type="text/javascript">
window.onload = function()
{
var snap = Snap(912,912);
var headline = snap.paper.text(56,100, ['The Three Layers','of','Every Web Page']).attr({fill: '#FBAF3F', fontFamily: 'Impact'});
}
</body>
</html>
here you can see the output
UPDATE
if you want to know more about it with example.
http://www.sitepoint.com/create-infographic-using-snap-svg/
I have searched a lot to find what I wanted and I found exactly what I was looking for.
Here is the code and an example: text gradient generated with snap.svg
system:
Odoo V8.
Issue:
On The last PDF order i discovered that somehow the template is not applied. (only flat ugly text)
All the fields are here, including footer but the header is not here and there is no style applied nor pictures (as it was by default in the previous reports)
The same occurred for all the PDF reports so i guess i somehow changed or killed the template. How may i fix it?
Before:
After the install everything was correct. The base template was applied and was ok for both sales and purchase PDF files.
UPDATE:
The content of the model in the company setting (settings=>company under the report tab) is correct (when i preview the page everything is ok)
The external_layout qview is :
<?xml version="1.0"?>
<t t-name="report.external_layout">
<!-- Multicompany -->
<t t-if="o and 'company_id' in o">
<t t-set="company" t-value="o.company_id"/>
</t>
<t t-if="not o or not 'company_id' in o">
<t t-set="company" t-value="res_company"/>
</t>
<t t-call="report.external_layout_header"/>
<t t-raw="0"/>
<t t-call="report.external_layout_footer"/>
</t>
The external_layout_header qview is (we can clearly see the call to the RML header which is what is expected):
<?xml version="1.0"?>
<t t-name="report.external_layout_header">
<div class="header">
<div class="row">
<div class="col-xs-3">
<img t-if="company.logo" t-att-src="'data:image/png;base64,%s' % company.logo" style="max-height: 45px;"/>
</div>
<div class="col-xs-9 text-right" style="margin-top:20px;" t-field="company.rml_header1"/>
</div>
<div class="row zero_min_height">
<div class="col-xs-12">
<div style="border-bottom: 1px solid black;"/>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<div t-field="company.partner_id" t-field-options="{"widget": "contact", "fields": ["address", "name"], "no_marker": true}" style="border-bottom: 1px solid black;"/>
</div>
</div>
</div>
</t>
Both footer and header seem included. but the result of all the PDF reports is:
- no header
- content ok (but no font nor style)
- footer ok (but no font nor style)
Thank you
Hello Stephane TAMPIGNY,
Plase read this post
Click to See the Answer for your questioned post References
I hope this should helpful for you ..:)
I found out that my issue was similar to this one : https://github.com/odoo/odoo/issues/1105
It is due to the web.base.url value which was different depending working from a place or another. then I just fixed it to the most common value and will have to forget working from some computers with tunneling.
Check the details to fixed the value : https://bugs.launchpad.net/openobject-server/+bug/1295022
I'm using Zurb Foundation and have the following html:
<div class="section-container auto" data-section>
<section>
<p class="title" data-section-title>Tab 1</p>
<div class="content" data-section-content>
<p>Content of section 1.</p>
</div>
</section>
<section>
<p class="title" data-section-title>Tab 2</p>
<div class="content" data-section-content>
<p>Content of section 2.</p>
</div>
</section>
</div>
Is it posible to disable second tab? Tab button should be visble, but not clickable.
You could add some CSS to disable it.
.disabled {
pointer-events: none;
cursor: default;
}
Edit
With respect to Dolondro's comment and pointer events not working in IE, see css 'pointer-events' property alternative for IE
slightly dirty hack, but it will work everywhere (don't forget to add class 'disabled' to the tag)
$("[data-tabs] > li.disabled a").bind("click", function(e)
{
e.preventDefault();
e.stopImmediatePropagation();
e.stopPropagation();
});
You can set a custom link class to only consider enabled tabs via data-link-class and then use the specified class only the enabled tabs.
<ul class="tabs" data-tabs data-link-class="enabled" id="disabled-tabs">
<li class="enabled"><a>Tab 1</a></li>
<li><a>Tab 2</a></li>
</ul>
By default, foundation uses tabs-title for the link class, but you can override it. In this example, I'm using enabled to only target enabled tabs. Foundation will ignore the tabs without the enabled class.
You'll probably also want to disable pointer events on the disabled tabs so that the user doesn't think they can interact with the disabled tab.
.tabs li:not(.enabled) a {
pointer-events: none;
}
I need to create user control where <sc:text/> element should showed over the <sc:image>.
I know this can be achieved via CSS but in this case control cannot be configured as we cannot override inline styles.
Any hints?
You can achieve this using the sc:fld extension function and wrapping sc:text in markup, adding class names or ids (or inline styles if you must!).
<img src="{sc:fld( 'graphic', $sc_currentitem, 'src’ )}" class="head" />
<span class="txt"><sc:text field="txtField" /></span>
You can then style these as normal
img.head {}
span.txt {}
I don't understand the problem. This seems like more of a front-end problem than a Sitecore issue. CSS will work fine. Here's a rough example (not tested but gets you the idea):
Sample HTML:
<div class="my-container">
<div class="img">
<sc:image Field="Bar" runat="server" />
</div>
<div class="txt">
<sc:text Field="Foo" runat="server" />
</div>
</div>
Sample CSS:
.my-container {
position: relative;
}
.my-container .txt {
position: absolute;
z-index: 50;
top: 0px;
}
.my-container .img {
z-index: 10;
}
Let's say, I have HTML code like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
This is content.
</body>
</html>
And I want to add a <noscript> tag there. Which means, if the JavaScript disabled, it will show as a blank page.
And only when JavaScript is disabled, it will show "This is content text".
Please give me some examples to achieve. Thanks.
An alternative to a JS approach as suggested by rahul is to display a div in the <noscript> element, covering the entire page:
<noscript>
<div style="position: fixed; top: 0px; left: 0px; z-index: 30000000;
height: 100%; width: 100%; background-color: #FFFFFF">
<p style="margin-left: 10px">JavaScript is not enabled.</p>
</div>
</noscript>
Wrap all you contents inside a main div with display none and in the onload function change the display to block.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div id="divMain" style="display: none">
This is content.
</div>
<noscript>
JS not enabled
</noscript>
<script>
document.getElementById("divMain").style.display = "block";
</script>
</body>
</html>
The noscript tag works the other way around. To make the content visible when script is enabled, put it in an element that is hidden, and show it using script:
<div id="hasScript" style="display:none">
This is content
</div>
<script>document.getElementById('hasScript').style.display='';</script>
It's a little odd.
You don't even need a 'noscript' for this. You can just have a blank first page, who's only content is a javascript of the form:
document.location = '/realpage.htm';
And then call that OnLoad, with jQuery, or whatever. This will mean if the client doesn't have scripting, they don't go anywhere, hence the page remains blank.
Edit:
Example, as requested:
<html>
<body onload="document.location = 'realpage.html';">
</body>
</html>
This SHOULD really work!
hide a content when javascript is not enabled
Note: you can replace <noscript> with <noembed> or <noframes>, too.
<!-- Normal page content should be here: -->
Content
<!-- Normal page content should be here: -->
<noscript>
<div style="position: absolute; right: 0; bottom: 0;
display: none; visibility: hidden">
</noscript>
<-- Content that should hide begin -->
**Don't Show! Content**
<-- Content that should hide begin -->
<noscript>
</div>
</noscript>
<!-- Normal page content should be here: -->
Content
<!-- Normal page content should be here: -->
Both the style tag and the meta refresh DO work inside noscript:
<noscript>
<style>body { display:none; }</style>
<meta http-equiv="refresh" content="0; url=blankpage.html">
</noscript>
The first line will display the current page but empty.
The Second line will redirect to blankpage.html
I had a very problem:
I wanted to show the full site when javascript was enabled. However, if javascript were disabled, not only did I want to show a "this site requires javascript..." message, but I still wanted to display the header & footer (which reside in header.inc and footer.inc, called by each content page) of my site (to look nice). In other words, I only wanted to replace the main content area of my site. Here's my html/css solution:
Header.inc file (location not important):
<noscript>
<style>
.hideNoJavascript {
display: none;
}
#noJavascriptWarning {
display: block !important;
}
</style>
</noscript>
Header file (bottom):
<div id="noJavascriptWarning">The Ignite site requires Javascript to be enabled!</div>
<div class="container-fluid hideNoJavascript">
<!-- regular .php content here -->
CSS file:
#noJavascriptWarning {
color: #ed1c24;
font-size: 3em;
display: none; /* this attribute will be overridden as necessary in header.inc */
text-align: center;
max-width: 70%;
margin: 100px auto;
}
In summary, my "javascript required" message is hidden per my default CSS rule. However, when the browser parses the tag, it overrides the default rule, resulting in main content being hidden and (everything except header/footer) and the javascript message being displayed. Works perfectly...for my needs! Hopefully someone else finds this useful :-)
Here are two screenshots with javascript enabled/disabled:
You could do something like
<body id="thebody">
this is content.
<script>
document.getElementById('thebody').innerHTML = "<p>content when JS is enabled!</p>";
</script>
</body>
I know this is an old inquire, but somehow none of this things worked in one of the PHP page I created. Below is what worked, the important thing was the comment tag between the noscript tag:
<noscript>
<center><div style="font-size:300%;position: absolute;top: 40%;left: 50%;margin-right: -50%;transform: translate(-50%, -50%)">
Scripts are Required...
<meta http-equiv='refresh' content="1;url=http://flstate.us/NoScript"/>
</div> </center>
<!--
</noscript>
<html>
<body>
Page HERE...
</body>
</html>
<noscript> --> </noscript>