I'd like to make autoslide gallery.I wonder how to start it... It got to be dynamic, because folder content will change with time. Typing is not what I'm looking for. Can You give me any advices or tutorials I can base on? I was searching but there's no for dynamic folder content...
This is a very generic example and may not be direct copy/paste for you but it should help you learn the fundamentals of achieving your intended result.
Using this library:
https://gist.github.com/tsohil/623538
Assuming you want to get all of the images in the folder.
First, we'll use PHP to fetch the file names doing so along the lines of:
<?php
echo json_encode(glob("folder/relative/to/controller/*.{jpg,png,gif}", GLOB_BRACE));
Our HTML we will stage as:
<div id="carousel"></div>
Then in our JS (example requires jQuery) we will send a request for to that.
$.get('/phpcontroller.php', {}, function(data) {
data.forEach(function(val) => {
$("#carousel").append("<div class=\"inactive\">
<img width=\"946\" height=\"473\" src=\"/path/to/folder/"+val+"\" class=\"car-img\">
</div>");
});
});
Related
I'm trying to get the hang of ClientDependency Framework.
https://github.com/Shazwazza/ClientDependency
I use it in an Umbraco website.
I'm having a problem with some custom javascript (not in a file) that I want to run.
I want to run a function (which is in "functions.js"), but with a different parameter per page.
So, I add the following to my template:
Html.RequireJs("~/scripts/functions.js", 1);
And on my masterpage before the -tag I've added:
#Html.RenderJsHere()
But where do I place my function-call? I can't just add it to my template, because "functions.js" isn't loaded yet (it's at the bottom of my masterpage).
I've thought about creating a js-file for each call and add them to the Html.RequireJs(...) but that isn't a great solution.
Is there a way to add inline-script to the list of "JS-to-render" ?
edit:
I was just trying to get it to work using RenderSection(), but that doesn't seem to work when the section is defined on a macro?
edit:
I don't have the code here at the moment I'm typing this, but the idea is like this:
functions.js
function WriteToConsole(input) {
console.log('Log', input);
}
template1.cshtml
#{Html.RequireJs("functions.js");}
<script>
WriteToConsole("This is from template 1");
</script>
template2.cshtml
#{Html.RequireJs("functions.js");}
<script>
WriteToConsole("This is from template 2");
</script>
master.cshtml
<body>
#RenderBody()
#Html.RenderJsHere()
</body>
Just to give an idea of what I'm trying to do.
As you can imagine, the <script> part on my template is now being called before functions.js is included. And this results in an error.
Or am I handling this whole thing wrong?
Are you trying to alter the script call in: Html.RequireJs("~/scripts/functions.js", 1); ?
So something like Html.RequireJs("~/scripts/functions.js?myparam=xyz", 1); Is this what you are trying to achieve but having the url be dynamic?
If so you could do something like this :
//perhaps have some logic above to determine what the query should be and concatenate it to the string like so.
string query = "?myparam=xyz";
string scriptcall = "~/scripts/functions.js"+query ;
Html.RequireJs(scriptcall, 1);
Could you provide more code so we can see what you are trying to do? Maybe list in steps on how it should work?
I am using the Ghost Blogging Software and tumbled over Tangle these days. So it would be great to be able to use that in some of my Blog posts.
I have included the Tangle-files in my theme and load them in default.hbs. However, I cannot find a way to embed some javascript (to be executed, but not displayed) in the markdown document. I would like to write the javascript in the markdown document too as I do not want to add js-Files to my theme each time I write a blog post with reactive content.
Is there a way to do this?
It seems there is. You should be able to include the JavaScript you want to run by just placing it inside of <script> tags like they talk about on this post
Edit: To further explain, a markdown file is just different syntax for creating html tags, but you can use regular html and script tags inside them. To get an script to run per the above link, you should only need to include whatever js you want to run inside of the script tags. This example should work inside of a markdown post file to replicate the Tangle example on the doc page
When you eat <span data-var="cookies" class="TKAdjustableNumber"> cookies</span>,
you consume <span data-var="calories"> calories</span>.
<script>
var tangle = new Tangle(document, {
initialize: function () { this.cookies = 3; },
update: function () { this.calories = this.cookies * 50; }
});
</script>
I have a site which will have a gallery with 3 sections. Each section has up to 30 images. I will store the images in folders relating to the relevant sections (ie "img/gallery/category1", "img/gallery/category2" and "img/gallery/category3")
Basically instead of writing html to display each individual image, I would like to have a javascript loop which will look in the folder and display each image, and place the url within a predefined snippet of code, ie:
<div class="span4">
<img src="img/gallery/category1/IMAGE-FILENAME1">
</div>
<div class="span4">
<img src="img/gallery/category1/IMAGE-FILENAME2">
</div>
... etc, until all images from the folder have been processed... (also, I know I could be a bit smarter with the html above, but I want to communicate that I want each found image url to sit amongst a repeated snippet of code).
I'm still training in javascript, so I wondered whether there was a way I could do this?
Thanks
Javascript can't do this by iteself... however, if you had an XML or JSON formatted list of images and their respective locations, you could use ajax to get that file, parse it's contents, and create your markup.
I found an alternative solution.
I wasn't quite ready to tackle AJAX, JSON or anything listed below just yet. So I decided to look into using PHP. Solution as folows:
I first of all used the following to go to and read the contents of the folder to an array:
$directory = "DIRECTORY"
$dirhandler = opendir($directory);
$nofiles=0;
while ($file = readdir($dirhandler)) {
if ($file != '.' && $file != '..')
{
$nofiles++;
$files[$nofiles]=$file;
}}
And then using a foreach loop I iterated through the array, everytime echoing the html output which referenced the filename found.
Works perfectly.
You cannot look directly at the directory on the server from Javascript. You could make an AJAX call to the server to get the list (in XML or JSON), and then create and append a new div for each file as you loop through the response.
Thanks for you replies. Sorry, if it doesn't make sense I will try again, I'm probably complicating things!
I have a frameset index.html, with top.php with is just the radio stream, under that is index.php which is the full joomla website with navigation and everything.
The problem is, if users find the website via a search engine. It will take take them to just the index.php and they won't get the frameset with the top.php. I was using this code in the top.php and index.php:
if(self.location==top.location)self.location="index.html";
which works great apart from it takes the user to index.php no matter what page they were looking for via a search engine.
So I found this article (look under 'A better way' section) which shows you how to code it so if the user's content is on about-us.html, it will take you to that page but still ensure it is in the frameset.
http://scriptasylum.com/tutorials/frameredirect/frameredirect.html
I would like something like that but unfortunately with it being a Joomla website, I don't have page1.html, page2.html etc to be able to add the code and change it accordingly as per their instructions. I only have one page index.php which generates the pages dynamically 'on the fly'
So does anyone know a way I can do what I am wanting...
The frame set is at http://www.housocial.com/new/index.html
Just the joomla part http://www.housocial.com/new/index.php
Thanks again
You may extract the filename via RegExp(I'm not sure if this is what you're asking for)
if(self==top)
{
self.location="index.html?"+encodeURIComponent(location.href.match(/\w+\.html$/));
}
A more flexible solution that takes care of GET-parameters and anchors:
(
function(url,pattern,query,hash)
{
var filename=location.pathname.match(pattern);
if(filename)
{
url+=filename;
if(query && location.search)
{
url+=location.search;
}
if(hash)
{
url+=location.hash
}
location.href=url;
}
}
)('http://www.housocial.com/new/index.php/', //target-URL
/\w+\.html$/, //pattern to search for
1, //include QUERY_STRING
1 //include hash
)
I want JavaScript code to be separated from views.
I got the requirement to implement localization for a simple image button generated by JavaScript:
<img src="..." onclick="..." title="Close" />
What's the best technique to localize the title of it?
PS: I found a solution by Ayende. This is the right direction.
Edit:
I got Localization helper class which provides the Controller.Resource('foo') extension method.
I am thinking about to extend it (helper) so it could return all JavaScript resources (from "ClientSideResources" subfolder in App_LocalResources) for the specified controller by its name. Then - call it in BaseController, add it to ViewData and render it in Layout.
Would that be a good idea?
EDIT
Consider writing the necessary localized resources to a JavaScript object (hash) and then using it for lookup for your dynamically created objects. I think this is better than going back to the server for translations. This is similar to adding it via viewdata, but may be a little more flexible. FWIW, I could consider the localization resources to be part of the View, not part of the controller.
In the View:
<script type="text/javascript"
src='<%= Url.Content( "~/Resources/Load?translate=Close,Open" %>'></script>
which would output something like:
var local = {};
local.Close = "Close";
local.Open = "Open";
Without arguments it would output the entire translation hash. Using arguments gives you the ability to customize it per view.
You would then use it in your JavaScript files like:
$(function(){
$('#button').click( function() {
$("<img src=... title='" + local.Close + "' />")
.appendTo("#someDiv")
.click( function() { ... } );
});
});
Actually, I'm not too fussed about keeping my JavaScript code out of my views as long as the JavaScript code is localized in a container. Typically I'll set my master page up with 4 content area: title, header, main, and scripts. Title, header, and main go where you would expect and the scripts area goes at the bottom of the body.
I put all my JavaScript includes, including any for viewusercontrols, into the scripts container. View-specific JavaScript code comes after the includes. I refactor shared code back to scripts as needed. I've thought about using a controller method to collate script includes, that is, include multiple scripts using a single request, but haven't gotten around to that, yet.
This has the advantage of keeping the JavaScript code separate for readability, but also allows me to easily inject model or view data into the JavaScript code as needed.
Actually ASP.NET Ajax has a built-in localization mechanism: Understanding ASP.NET AJAX Localization
If you insist on keeping it separate, you could do something like:
//keep all of your localised vars somewhere
var title = '{title_from_server}';
document.getElementById('someImage').title = title;
Remember, if you use JavaScript code to initialize any text of elements, your site will degrade horribly where JavaScript isn't available.