I'd like to use some of the effects provided with Effeckt.css - buttons and off-screen nav. Looking at the source, I can see it's been neatly arranged to be modular.
I have cloned the project, but I don't really know how to get started as a user - the docs seem to be aimed at contributors.
Say I just want to include a button. I've tried copying the demo.autoprefixed.css and effeckt.autoprefixed.css files to my own project, and then done this:
<link rel="stylesheet" href="assets/css/m.autoprefixed.css">
<link rel="stylesheet" href="assets/css/effeckt.autoprefixed.css">
...
<div class="button-demo-wrap">
<button class="effeckt-button slide-left"><span class="label">Slide Left</span> <span class="spinner"></span></button>
</div>
This doesn't work, and it includes an awful lot of code I don't need for just one button. How do I get started with this project?
This seems to have to do with JavaScript.
I inspected the site, and it seems Effeckt.css is an CSS-Framework which needs a bit of Javascript to trigger the animations.
The following code (which is also in the JS-Fiddle) was found in the buttons.js which is referenced on their demo-site.
I have made a sample demo on how to use these buttons here:
http://jsfiddle.net/fc6ux/
The relevant part is following:
$('.effeckt-button').on( 'click', function(){
showLoader(this);
});
function showLoader(el) {
var button = $(el),
resetTimeout;
if(button.attr( 'data-loading' )){
button.removeAttr( 'data-loading' );
}
else {
button.attr( 'data-loading', true );
}
clearTimeout( resetTimeout );
resetTimeout = setTimeout( function() {
button.removeAttr( 'data-loading' );
}, 2000 );
}
Related
I've created a google content experiment without redirects using the docs.
The basic implementation involves a javascript snippet that uses the following code to choose the version of the experiment:
<!-- Load the Content Experiment JavaScript API client for the experiment -->
<script src="//www.google-analytics.com/cx/api.js?experiment=YOUR_EXPERIMENT_ID"></script>
<script>
// Ask Google Analytics which variation to show the user.
var chosenVariation = cxApi.chooseVariation();
</script>
<!-- Load the JQuery library -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
// Define JavaScript for each page variation of this experiment.
var pageVariations = [
function() {}, // Original: Do nothing. This will render the default HTML.
function() { // Variation 1: Banner Image
document.getElementById('banner').src = 'bay-bridge.jpg';
},
function() { // Variation 2: Sub-heading Text
document.getElementById('heading').innerHTML = 'Look, a Bridge!';
},
function() { // Variation 3: Button Text
document.getElementById('button').innerHTML = 'Learn more';
},
function() { // Variation 4: Button Color
document.getElementById('button').className = 'button button-blue';
}
];
// Wait for the DOM to load, then execute the view for the chosen variation.
$(document).ready(
// Execute the chosen view
pageVariations[chosenVariation]
);
</script>
However, when I visit the page using an incognito window, I only see the first variation of the experiment. When I check chosenVariation in the console, it's always 0. In fact, when I call cxApi.chooseVariation(); in the console, it always returns 0.
Is this because google recognizes my incognito browser windows, or is something broken with cxApi.chooseVariation(); or in my implementation?
I had the same problem, 100% of the sessions were given the original (0) variation. In order to fix the problem, I added the javascript code provided by the experiment. Go to your experiment (edit), click Setting up your experiment code, manually insert the code, copy the code in there.
Now since you (and I) don't want to have a redirect, remove this part at the end of the code <script>utmx('url','A/B');</script>. If your page is templated, you can use a variable and insert your experiment key (not experiment id) where you see var k='########-#'
Now either very few people use the experiments in a client-only fashion or we're totally stupid because it would seem to me that the guide is wrong and there's absolutely no documentation that shows a working client-only setup.
Hi I am trying to add css dynamically but it's not working bellow is my code
angular.module('myApp', [ 'myApp.controllers','myApp.services']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/new', { templateUrl: 'partials/add.html', controller: 'add' ,resolve: {
style : function(){
/* check if already exists first - note ID used on link element*/
/* could also track within scope object*/
alert("DSAF");
angular.element('head').append(' <link rel="stylesheet" href="css/app.css"/>');
}
}}) }]);
Without more info on your code it will be difficult to help but anyway here are a two (easy) things that come to my mind :
Be sure that the path css/app.css redirects to a file i.e no 404,
angular.element('head') will work only if jquery is loaded before angular otherwise you will have an error regarding jqLite.
Finally I have assemble a plunker here where everything is working the way it should base on your extract of code. Let me know if it helps.
I was hoping anyone could give some input on this,
I'm creating a meteor app in which I would like to use bootstrap to creating the admin environment, but have the visitor facing side using custom css. When I add the bootstrap package to my app using meteor it's available on every page, is there a way to restrict the loading of bootstrap to routes that are in '/admin' ?
When you add bootstrap package it's not possible. You can, however, add bootstrap csses to public directory and then load them in a header subtemplate that will only be rendered when you're in the dashboard.
EDIT
But then how would you go about creating seperate head templates?
Easy:
<head>
...
{{> adminHeader}}
...
</head>
<template name="adminHeader">
{{#if adminPage}}
... // Put links to bootstrap here
{{/if}}
</template>
Template.adminHeader.adminPage = function() {
return Session.get('adminPage');
}
Meteor.router.add({
'/admin': function() {
Session.set('adminPage', true);
...
}
});
DISCLAIMER: I am unsure of a 'meteor way' to do this, so here is how I would do it with plain JS.
jQuery
$("link[href='bootstrap.css']").remove();
JS - Credit to javascriptkit
function removejscssfile(filename, filetype){
var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none" //determine element type to create nodelist from
var targetattr=(filetype=="js")? "src" : (filetype=="css")? "href" : "none" //determine corresponding attribute to test for
var allsuspects=document.getElementsByTagName(targetelement)
for (var i=allsuspects.length; i>=0; i--){ //search backwards within nodelist for matching elements to remove
if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(filename)!=-1)
allsuspects[i].parentNode.removeChild(allsuspects[i]) //remove element by calling parentNode.removeChild()
}
}
removejscssfile("bootstrap.css", "css")
However, doing that would complete remove it from the page. I am not sure whether meteor would then try to readd it when a user goes to another page. If that does not automatically get readded, then you have an issue of bootstrap not being included when someone goes from the admin section to the main site, which would break the look of the site.
The way I would get around that would be to disable and enable the stylesheets:
Meteor.autorun(function(){
if(Session.get('nobootstrap')){
$("link[href='bootstrap.css']").disabled = true;
}else{
$("link[href='bootstrap.css']").disabled = false;
}
});
There my be other bootstrap resources which may need to be removed, take a look at what your page is loading.
To use jQuery in the same way but for the javascript files, remember to change link to script and href to src
From my tests, Meteor does not automatically re-add the files once they have been removed so you would need to find some way of re-adding them dynamically if you want the same user to be able to go back and forth between the main site and the admin site. Or simply if the http referrer to the main site is from the admin, force reload the page and then the bootstrap resources will load and everything will look pretty.
P.s. make sure you get the href correct for the jQuery version
If somebody is interested in including any js/css files, I've written a helper for it:
if (Meteor.isClient) {
// dynamic js / css include helper from public folder
Handlebars.registerHelper("INCLUDE_FILES", function(files) {
if (files != undefined) {
var array = files.split(',');
array.forEach(function(entity){
var regex = /(?:\.([^.]+))?$/;
var extension = regex.exec(entity)[1];
if(extension == "js"){
$('head').append('<script src="' + entity + '" data-dynamicJsCss type="text/javascript" ></script>');
} else if (extension == "css"){
$('head').append('<link href="' + entity + '" data-dynamicJsCss type="text/css" rel="stylesheet" />');
};
});
}
});
Router.onStop(function(){
$("[data-dynamicJsCss]").remove();
});
}
Then simply use:
{{INCLUDE_FILES '/css/html5reset.css, /js/test.js'}}
in any of your loaded templates :)
I have a page for an internal app that displays document images streamed from a document storage system using a web service. The problem I am having is that when a user does their search they may get hundreds of hits, which I have to display on one large page so they can print them all. This works fine in Firefox, but in IE it stops loading the images after a while so I get a hundred or so displayed and the rest just have the broken image symbol. Is there a setting somewhere that I can change this timeout?
If the issue is indeed a timeout, you might be able to work around it by using a "lazy load" script and adding new images to the document only after existing images have loaded.
There are a lot of ways to do this, but here's a simple example I threw together and tested. Instead of this:
<img src="image001.jpg" />
<img src="image002.jpg" />
<img src="image003.jpg" />
<img src="image004.jpg" />
<!-- Etc etc etc -->
You could do this:
<div id="imgsGoHere">
</div>
<script type="text/javascript">
function crossBrowserEventAttach(objectRef, eventName, functionRef)
{
try {
objectRef.addEventListener(eventName, functionRef, false);
}
catch(err) {
try {
objectRef.attachEvent("on" + eventName, functionRef);
}
catch(err2) {
// event attachment failed
}
}
}
function addImageToPage()
{
var newImageElement = document.createElement("img");
newImageElement.src = imageArray[nextImageNumber];
var targetElement = document.getElementById("imgsGoHere");
targetElement.appendChild(newImageElement);
nextImageNumber++;
if (nextImageNumber < imageArray.length) {
crossBrowserEventAttach(newImageElement, "load", addImageToPage);
crossBrowserEventAttach(newImageElement, "error", addImageToPage);
}
}
var nextImageNumber = 0;
var imageArray = new Array();
imageArray[imageArray.length] = "image001.jpg";
imageArray[imageArray.length] = "image002.jpg";
imageArray[imageArray.length] = "image003.jpg";
// .
// .
// .
// Snip hundreds of rows
// .
// .
// .
imageArray[imageArray.length] = "image999.jpg";
addImageToPage();
</script>
Each image is added to the page only after the previous image loads (or fails to load). If your browser is timing out, I think that will fix it.
Of course, the problem might actually not be a timeout, but rather that you're running out of memory/system resources and IE is giving up. Or there might be an IE DOM limitation like Sra said.
No final solution, but some hints...
I think the ie Dom hangs up. I,ve seen this in other cases. I needed simply to show the images and used a js which loads the image the time they came into focus, but that want work if you directly hit print I think. Can you use the new css ability to store imagedata directly instead of links. That should solve your problem. I am not quite sure but I think it is supported since ie 7
My guess is that you have to work around the IE setting, the easiest way to do it is simply not showing images that are not loaded or replacing them with a default image:
your html:
<img src="http://domain.com/image.jpg" />
your js:
$('img').load(function(){
// ... loaded
}).error(function(){
// ... not loaded, replace
$(this).attr('src','/whatever/default.jpg');
// ... not loaded, hide
$(this).hide();
});
That is a problem with microsoft. Unfortunately, this is a setting that would have to be changed on every single computer, as there is no remote way to alter it. To change it on your computer, try opening regedit and adding the RecieveTimeout DWORD with a Value of (#of minutes)*6000. Hope this helps-CodeKid1001
Edit: Sorry about that, I forgot to put in the file path:
HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\InternetSettings
I used something similar to laod HD pictures as a background using ASP Pages
But i used jQuery to handle the images and its loading. This is a sample for 1 image but with a bit of tweaking you can load dynamically
myImage = new Image();
$(myImage).load(function ()
{
$(this).hide(); //Stops the loading effect of large images. can be removed
$('.csBackground li').append(this); //Append image to where you need it
$(myImage).show();
}).attr('src', settings.images[0]) //I pass an array from ASP code behind so 0 can be 'i'
.error( function { checkImages(); } ) //try and relaod the image or something?
So instead of changing the timeout- just try and reload the images on error.
Otherwise i only found a solution that is client specific (HTTP Timeout)
http://support.microsoft.com/kb/813827
I know there is at least 1 other post on SO dealing with this but the answer was never exactly laid out.
I am working in a WP child theme in the head.php document. I have added this in the head:
<link type="text/css" href="http://www.frontporchdeals.com/wordpress/wp-includes/js/jqueryui/css/ui-lightness/jquery-ui-1.8.12.custom.css" rel="Stylesheet" />
<?php
wp_enqueue_style('template-style',get_bloginfo('stylesheet_url'),'',version_cache(),'screen');
wp_enqueue_script('jquery-template',get_bloginfo('template_directory').'/js/jquery.template.js',array('jquery'),version_cache(), true);
wp_enqueue_style('jquery-style', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/smoothness/jquery-ui.css');
wp_enqueue_script('jq-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.js ');
wp_enqueue_script('jq-ui-min', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js' );
?>
and I added this in the body:
<script>
jQuery(function() {
$( "#dialog" ).dialog();
});
</script>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
but no dice. My div shows as standard div.
Any ideas at all? I know that top stylesheet should be called with enqueue but that shouldn't stop this from working.
WordPress jQuery is called in no-conflict mode:
jQuery(document).ready(function($) {
$('#dialog' ).dialog();
});
Also jQuery UI is loading before jQuery. You're getting 2 javascript errors:
Uncaught ReferenceError: jQuery is not defined
103Uncaught TypeError: Property '$' of object [object DOMWindow] is not a function
The first error is from jQuery UI loading before jQuery and the second is because the $ is not recognized in no-conflict mode.
Remove any of the inline <script src= tags and the call to the custom.css in header php and add this function to your child theme functions.php file to load the scripts. WordPress will put them in the right order for you.
add_action( 'init', 'frontporch_enqueue_scripts' );
function frontporch_enqueue_scripts() {
if (!is_admin() ) {
wp_enqueue_script( 'jquery' );
wp_register_script( 'google-jquery-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js', array( 'jquery' ) );
wp_register_script( 'jquery-template', get_bloginfo('template_directory').'/js/jquery.template.js',array('jquery'),version_cache(), true);
wp_register_style( 'jquery-style', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/smoothness/jquery-ui.css', true);
wp_register_style( 'template-style', 'http://www.frontporchdeals.com/wordpress/wp-includes/js/jqueryui/css/ui-lightness/jquery-ui-1.8.12.custom.css', true);
wp_enqueue_style( 'jquery-style' );
wp_enqueue_style( ' jquery-template' );
wp_enqueue_script( 'google-jquery-ui' );
wp_enqueue_script( 'jquery-template' );
}
}
I'm building a custom plugin on WP admin to insert data on custom MySQL tables. For nearly a week I was trying to do a confirmation dialog for a delete item event on a Wordpress table. After I almost lost all my hair searching for an answer, it seemed too good and simple to be true. But worked. Follows the code.
EDIT: turns out that the wp standard jquery wasn't working properly, and the Google hosted jQuery included in another class was making the correct calls for the JS. When I removed the unregister/register added below, ALL the other dialog calls stopped working. I don't know why this happened, or the jQuery version included in this particular WP distribution, but when I returned to the old registrations, using Google hosted scripts as seen below, everything went back to normality.
On PHP (first, register and call the script):
add_action('admin_init', 'init_scripts_2');
function init_scripts_2(){
///deregister the WP included jQuery and style for the dialog and add the libs from Google
wp_deregister_script('jquery-ui');
wp_register_script('jquery-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js');
wp_deregister_style('jquery-ui-pepper-grinder');
wp_register_style('jquery-ui-pepper-grinder', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/pepper-grinder/jquery-ui.min.css');
wp_enqueue_script('jquery-ui'); ///call the recently added jquery
wp_enqueue_style('jquery-ui-pepper-grinder'); ///call the recently added style
wp_deregister_script('prevent_delete'); ///needed the deregister. why? don't know, but worked
///register again, localize and enqueue your script
wp_register_script('prevent_delete', WP_PLUGIN_URL . '/custom_plugin/js/prevent_delete.js', array('jquery-ui'));
wp_localize_script('prevent_delete', 'ajaxdelete', array('ajaxurl' => admin_url('admin-ajax.php')));
wp_enqueue_script('prevent_delete');
}
Next, if you're opening the dialog on a click event, like me, make sure you ALWAYS use class instead of id to identify the button or link later, on jQuery.
<a class="delete" href="?page=your_plugin&action=delete">Delete</a>
We also need to use a tag that holds the dialog text. I needed to set the style to hide the div.
<div id="dialog_id" style="display: none;">
Are you sure about this?
</div>
Finally, the jQuery.
/*jslint browser: true*/
/*global $, jQuery, alert*/
jQuery(document).ready(function ($) {
"use strict";
///on class click
$(".delete").click(function (e) {
e.preventDefault(); ///first, prevent the action
var targetUrl = $(this).attr("href"); ///the original delete call
///construct the dialog
$("#dialog_id").dialog({
autoOpen: false,
title: 'Confirmation',
modal: true,
buttons: {
"OK" : function () {
///if the user confirms, proceed with the original action
window.location.href = targetUrl;
},
"Cancel" : function () {
///otherwise, just close the dialog; the delete event was already interrupted
$(this).dialog("close");
}
}
});
///open the dialog window
$("#dialog_id").dialog("open");
});
});
EDIT: The call for the standard wp dialog style didn't work after all. The "pepper-grinder" style made the dialog appear correctly in the center of the window. I know the looks for the dialog are not very easy on the eye, but i needed the confirmation dialog and this worked just fine for me.
The dialog div is created AFTER when you're trying to act upon it. Instead, you should use:
$(document).ready(function() {
$( "#dialog" ).dialog();
});