when loading something slow, I show a splash screen using
<div wire:loading class="my-splash-screen-spinner">
Loading.....
</div>
the problem is, there are still overflow scroll bars on the body or html tag.
I want to remove those. What is the way?
My question is basically: when livewire goes to loading state, how can I add a css class to the body? with that css class, I can remove the overflow from body.
Is there a way to listen to loading via livewire javascript and then do something on loading and on stop loading? (add remove class to body)
You probably forgot to add
<head>
#livewireStyles
</head
Related
I would like to use turbolinks in a rails 4 application but not have it replace the entire <body> tag. Instead I would like to specify a tag/selector for turbolinks to refresh.
Something like...
<body>
<div class="turbolinks-refreshes-this">
Some content that is replaced whenever a link is clicked.
</div>
<div class="turblinks-does-not-refresh-this">
Some content that remains even if a link is clicked.
</div>
</body>
My guess is you would need to fork turbolinks to add this functionality but thought I'd throw it out there to see if anyone else has tried to do this.
Have you looked at pjax? It's very similar to Turbolinks (and gets a mention in the Turbolinks README) but lets you specify a target container. Here's a Railscast that shows how to use it in a Rails app.
Here's a (slightly modified) excerpt from the pjax README:
<h1>My Site</h1>
<div class="container" id="pjax-container">
Go to next page.
</div>
We want pjax to grab the url /page/2 then replace #pjax-container
with whatever it gets back. No styles or scripts will be reloaded and
even the h1 can stay the same - we just want to change the
#pjax-container element.
We do this by telling pjax to listen on a tags and use
#pjax-container as the target container:
$(document).pjax('a', '#pjax-container')
Now when someone in a pjax-compatible browser clicks "next page" the
content of #pjax-container will be replaced with the body of
/page/2.
I have followed the instructions here Phileo Docs and I added my model to the LIKABLE_MODELS, I added a widget in my template but it is not working. In the admin the Phileo table Like is also emplty. When I press the like button i am redirected to this page http://localhost:8000/likes/like/19:1/ but nothing happens and the count ofcourse stays the same. When I add a like from the admin it does appear on the template but it doesn't work vice verse.
Has anyone faced a similar problem or anyn idea how to fix this?
This is what was missing.
From the docs
{% load staticfiles %}
<script src="{% static "js/eldarion-ajax.min.js" %}"></script>
This of course is optional. You can roll your own javascript handling
as the view also returns data in addition to rendered HTML.
Furthermore, if you don’t want ajax at all the view will handle a
regular POST and perform a redirect.
Lets say I have html view like <div ng-controler="contr">....</div> and a js controler. Supposed that i want to use this view on bottom left and right top of my main page, in the center of one of the sub pages and so on... What are my best options of reusage? I saw that i can inject the whole html into a string and call "compile" like this but this does not seem "elegant"
Put it in a spearate html file, or add to the template cache, and include it with the ng-include directive. I'll automatically create a new scope.
<ng-include src="'template.html'"></ng-include>
<ng-include src="'template.html'"></ng-include>
<script type="text/ng-template" id="template.html">
<div ng-controler="contr">....</div>
</script>
I have a pretty straight forward question, in regards to joomla templates.
The end result being : http://css3playground.com/flip-card.php
What I want to do is simple, in a sense, but need to know where to look;
I want to have the entire page wrapped in two divs, all the PHP code, to which class i can define in css and drop in some javascrpt so I can apply page transitions to that div. All of which I know how to do except for where to do it in, the PHP structure of joomla is new to me.
and also, after the first step is accomplished, create a second div after the content that would be dynamically loaded with content from clicked links on the page from within the template, but thats two questions at once lol.
Any ideas on the first part?
If you just want to use a div to encompass the entire template, do exactly that: wrap the template in a div and give it a custom class or id:
<html>
<head>
//stuff here
</head>
<body>
//insert the wrapper here
<div id="wrapper">
//template structure here
</div>
</body>
</html>
The file you want to edit will likely be named index.php located at public_html/templates/your_template/index.php.
For some templates, such as those by Yootheme, you will instead want to edit the file at public_html/templates/your_template/layouts/template.php (or /public_html/templates/your_template/styles/current_profile/layouts/template.php if you're using a profile other than the default).
I'm creating a set of ColdFusion custom tags designed to make reusing certain layout elements easy. I'll be using them in a manner similar to the following:
<cfimport prefix="layout" taglib="commonfunctions/layouttags">
<layout:fadingbox>
This text will fade in and out
</layout:fadingbox>
<layout:stockticker>
This text will scroll across the screen
</layout>
In order for the code these custom tags generates to work, a JavaScript file needs to be linked into the page like so:
<script src="commonfunctions/layouttags/enablingscript.js" type="text/javascript"></script>
I'd prefer to include the script from inside the custom tags, instead of making the user include it himself. The issue is that the JavaScript file should only be included once per page. After the first time one of these custom tags is used, I'd like subsequent calls to the same tag on the same page to avoid repeating the <script> tag. It's occurred to me that I could do something like this:
<cfif NOT isDefined("Caller.LayoutTagInitialized")>
<script src="commonfunctions/layouttags/enablingscript.js" type="text/javascript"></script>
</cfif>
<cfset Caller.LayoutTagInitialized = 1>
...but it seems inelegant.
I wonder, is there a better way?
How would you implement this?
Edit - Clarification:
In case what I wrote above didn't make sense, here's a more detailed example:
If I have a custom tag like this:
<cfif ThisTag.ExecutionMode EQ "start">
<script src="commonfunctions/layouttags/enablingscript.js" type="text/javascript"></script>
<div class="mytag">
<cfelse>
</div>
</cfif>
...and I have CFML markup calling the tag like like this:
<layout:mytag>
One
</layout:mytag>
<layout:mytag>
Two
</layout:mytag>
<layout:mytag>
Three
</layout:mytag>
...I want HTML like the following to be generated:
<!-- Script included only the first time the tag is called -->
<script src="commonfunctions/layouttags/enablingscript.js" type="text/javascript"></script>
<div class="mytag">
One
</div>
<!-- No <script> tag on the second call -->
<div class="mytag">
Two
</div>
<!-- No <script> tag on the third call -->
<div class="mytag">
Three
</div>
Use the Request scope.
Your solution isn't far off.
Sam's right that the executionmode is what you want to use when you're wanting something to come out in the start or end mode of the tag, which is part of what you want.
But then you say you want that script tag put out in the start mode of only the first tag used on the page.
That's where you would use Peter's suggestion of the request scope. Unlike the default (or "variables") scope, the request scope is shared among all custom tags on a given request. You proposed using the caller scope, and that could work, too, unless the caller was another custom tag, in which case the caller scope would only be the local scope in the custom tag. The request scope (which has been around since about CF 4.01) is your best choice.
In that case, your proposed solution was close: in the custom tag, in the start mode, programatically check if you have already created a tracking variable in the request scope when you put the script tag out the first time. If not, put out the script tag and create the tracking variable.
Other than changing your code from using caller to request, I'd also suggest you'd want to put the CFSET inside the IF. No need to execute it again for when the IF test fails.
Custom tags have a built in scope called thistag.
This code will work:
<cfif thisTag.ExecutionMode eq "start">