How can I set scrolling = "no" at the iframe podio-webform-frame?
Unfortunately it's possible in fully-conforming HTML5 with just HTML and CSS properties
view the automatic iframe generated by podio
Podio Webforms' iframe attributes are not customisable beforehand, but you can manipulate the attributes on it using, for example, JQuery.
Take a look at this SO answer for more info: https://stackoverflow.com/a/10083740/2904025
Example from Marcelo's code:
$('.podio-webform-frame').on("load", function() {
$('.podio-webform-frame').attr("scrolling", "no");
});
$("iframe").each(
function(index, elem) {
elem.setAttribute("scrolling","no");
}
);
I can recommend this solution, worked for me (compared to the one above which did not work). You can also add more attributes, just add a new line in that case, e.g.
elem.setAttribute("height","1159");
Related
We're trying to integrate Full Calendar on the front-end of a WordPress site. The problem we are facing is that most WordPress themes have custom styles that alter the appearance of tables, making Full Calendar look broken.
I'm no CSS expert, so any help is greatly appreciated. Is there any way to reset the styles so that Full Calendar's own styles are always applied to the same style set, regardless of any other styles that may be loaded on the page?
Thanks :)
Maybe you can try to remove their css, and add your css class there.
this works for me (version v1.5.4),
$('#calendar').fullCalendar({
...
,eventRender: function(event, element) { //render how event look like
// example add element
element.attr("category",event.title);
//example to remove the original color
//element.find("div").removeClass("fc-event-skin fc-event-inner");
//OR
//element.find("div").css({"background-color":"transparent","border-color":"transparent"});
//element.css({"background-color":event.colors,"border-color":"transparent"});
//example to add class
if(event.title === "big_event"){
element.addClass("calred");
}
},
viewDisplay : function(view) { //render how calendar look like
//example coloring on sat,sun
$(".fc-sat, .fc-sun").addClass("ss-holiday");
$("th.fc-sat, th.fc-sun").removeClass("ss-holiday");
}
...
});
I have multiple DIV elements on my page with the class "grid-item-container"
I want to make the background-color of each one different. I will set an array of 5 different colours that can be set.
There is a script available here that seems to do this: http://jsfiddle.net/VXG36/1/
$(document).ready(function() {
var randomColors = ["green","yellow","red","blue","orange","pink","cyan"];
$(".random").each(function(index) {
var len = randomColors.length;
var randomNum = Math.floor(Math.random()*len);
$(this).css("backgroundColor",randomColors[randomNum]);
//Removes color from array so it can't be used again
randomColors.splice(randomNum, 1);
});
});
I cannot however get it to run on my page. Is there something in this script that needs to be amended to make it Wordpress friendly?
Kind regards
Dave
You might wan't to wrap it in something like this:
jQuery(document).ready(function($) {
// Inside of this function, $() will work as an alias for jQuery()
// and other libraries also using $ will not be accessible under this shortcut
});
The jQuery library included with WordPress is set to the noConflict() mode (see wp-includes/js/jquery/jquery.js). This is to prevent compatibility problems with other JavaScript libraries that WordPress can link. Read more about it in Codex here.
Also, change $(.random) to $(.grid-item-container), this targets the class of your div.
The Portlets in Plone are quite handy but I'd like to be able to provide some method to users to be able to temporarily hide/show the portlets column. That is, by clicking a button, the portlets column should collapse and you see the content page in full width. Then clicking again and the portlets panel on the left expands and the main content page width shrinks to accommodate.
I've observed the HTML ID of the portlets column is "portal-column-one" and I tried adding a button to the page that runs javascript to set the visibility property of that element to "hidden" but this seemed to have no effect. I was able to go into Firebug and add style="visibility:hidden;" to the "portal-column-one" element and it had the effect of making the region invisible w/o resizing the page.
I am using Plone 4.1. I have the site configured with navigation portlet on all pages except the main page which has Navigation, Review List and Recent Changes.
So it seems it must be possible to embed some javascript in the page (I was thinking of adding this to the plone.logo page which I've already customized). But I guess its more complicated than the few stabs I've made at it.
Thanks in advance for any advice.
Solution (Thanks to input from Ulrich Schwarz and hvelarde):
The solution I arrived at uses JavaScript to set CSS attributes to show/hide the Portlets Column (Left side) and expand the content column to fill the space the porlets column filled.
I started by customizing the Plone header template to add a link for the user to toggle the view of the Porlets column. I also put the necessary javascript functions in this header.
To customize the header, go to the following page (need to be logged in as Admin of your Plone site):
http://SERVER/SITE/portal_view_customizations/zope.interface.interface-plone.logo
Where:
SERVER is the address and port of your site (e.g. localhost:8080)
SITE is the short name of your Plone Site
To create this page:
Go to Site Setup (as Admin)
Go to Zope Management Interface
Click on "portal_view_customizations"
Click on "plone.logo" (or at least this is where I choose to put the button so it would be located just above the navigation Portlet)
Add the following to the page:
<script>
function getById(id) {
return document.getElementById(id);
}
function TogglePortletsPanel() {
var dispVal = getById('portal-column-one').style.display
if( dispVal == "none") { // Normal display
SetPortletsPanelState("inline");
} else { // Full Screen Content
SetPortletsPanelState("none");
}
}
function SetPortletsPanelState(dispVal) {
var nav = getById('portal-column-one');
var content = getById('portal-column-content');
if( dispVal == "none") { // Normal display
nav.style.display='none';
content.className='cell width-full position-0';
// Set cookie to updated value
setCookie("portletDisplayState","none",365);
} else { // Full Screen Content
nav.style.display='inline';
content.className='cell width-3:4 position-1:4';
// Set cookie to updated value
setCookie("portletDisplayState","inline",365);
}
}
function InitializePortletsPanelState() {
var portletDisplayState=getCookie("portletDisplayState");
//alert("portletDisplayState="+portletDisplayState)
if (portletDisplayState!=null) SetPortletsPanelState(portletDisplayState);
}
function setCookie(c_name,value,exdays) {
//alert(c_name+"="+value);
// cookie format: document.cookie = 'name=value; expires=Thu, 2 Aug 2001 20:47:11 UTC; path=/'
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var exp= ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + escape(value) + exp + "; path=/";
}
function getCookie(c_name) {
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++) {
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x==c_name) return unescape(y);
}
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {oldonload(); }
func();
}
}
}
addLoadEvent(InitializePortletsPanelState);
</script>
<a style="font-size:50%;" href="javascript:TogglePortletsPanel();">Toggle Portlets Panel</a>
6. Save the page
Notes:
I got the names of the plone div elements using Firebug.
I also used Firebug to experiment with different settings to speed up prototyping. For example, editing the HTML inline to verify settings do as expected.
There is a slight but of delay until the Left Portlet panel is hidden. This is only obvious on Safari for me (which is probably due to how fast it is) but not on Firefox or IE.
Maybe it's just a matter of setting the right property: you want display:none, not visibility:hidden.
But even then, the content area will probably not reflow automatically, you'll need to (dynamically) change the class on it as well.
Specifically, you'll need to put classes width-full and position-0 on portal-column-content, instead of width-1:2 and position-1:4.
This must be achieved client side by javascript (jquery).
You must first read documentation about the css grid framework used by plone: deco.gs. The website is down so, git clone this repo: https://github.com/limi/deco.gs and open pages in a webbrowser
Note: you just have to change css classes on the containers.
Try adi.fullscreen, it respects Plone's css-structure as Ulrich Schwarz thoughtfully mentioned.
Thanks for reading. I have some codes on my wordpress site, the first one adds an overlay over an image with a color, the article title and a link to go to the project. The second code adds an ajax pagination using jQuery.
The thing is that i have my projects with images and the jquery overlay owrking perfect, but when they click on the previous projects link that calls the ajax pagination, the jquery overlay stops working.
I have been trying different options, but maybe i'm not on the correct way to solve it. Does anyone has a clue?
Thanks in advance.
The codes:
// PORTFOLIO HOVER EFFECT
jQuery('ul.portfolio-thumbs li').hover(function(){
jQuery(".overlay", this).stop().animate({top:'0px'},{queue:false,duration:300});
}, function() {
jQuery(".overlay", this).stop().animate({top:'190px'},{queue:false,duration:300});
});
// POSTS NAVIGATION
jQuery('#posts-navigation a').live('click', function(e){
e.preventDefault();
var link = jQuery(this).attr('href');
jQuery('#ajax-container').fadeOut(500).load(link + ' #ajax-inner', function(){ jQuery('#ajax-container').fadeIn(500); });
});
I've found the solution in the same day and #BrockAdams helped me with the doubts. I'm putting here the code because it can be helpful for someone.
jQuery('ul.portfolio-thumbs li').live('hover', function(event){
if (event.type == 'mouseenter') {
jQuery(".overlay", this).stop().animate({top:'0px'},{queue:false,duration:300});
} else {
jQuery(".overlay", this).stop().animate({top:'190px'},{queue:false,duration:300});
}
});
jQuery('#posts-navigation a').live('click', function(e){
e.preventDefault();
var link = jQuery(this).attr('href');
jQuery('#ajax-container').fadeOut(500).load(link + ' #ajax-inner', function(){ jQuery('#ajax-container').fadeIn(500); });
});
You can post answers to your own question.
And, you needed to use live()Doc on the hover, because the pagination presumably loads in new portfolio-thumbs lis.
Without the live(), these new lis would have no events attached to them (unless you re-called jQuery('ul.portfolio-thumbs li').hover after every pagination event).
Live is easier, and avoids the pitfall of having multiple copies of the same event-listener attached to an element.
And, yes, you can use both live() calls (or more) on the same page without problems.
I'm using the latest Drupal 7.2 core and I have no idea how to solve my problem. I'd like to collapse all nodes comments (there's lots of them) and expose them for the user when he presses 'show comments'. I know it has something to do with the fieldsets (or maybe I'm wrong), but where, what and how ?
Every helpful answer will be appreciated.
Thanks in advance.
I wrote a begging private message to one of the contributors and he posted a working solution for collapsible comments in D7 - http://drupal.org/node/94035#comment-4674734
So i tried a bunch of ways as suggested here.
The thing I ended up doing since I was trying to basically just put all the comments stuff into a collapsible fieldset is outlined here:
Go into the Content Type -> Manage Display.
Create an empty fieldset called something like Comments (You'll need fieldset/fieldcollection modules)
Once you have the group, grab the field_groupname for later use in code.
In your theme's template.php, or whereever you have the render arrays you'll have something like this to basically add the "comments" object into the group fieldset you just created.
function mytheme_preprocess_node(&$vars, $hook){
$tempField = null;
// Copy the comments / comment form into a variable.
$tempField = $vars['content']['comments'];
// Rename some of the labels, use the markup
$tempField['#title'] = "DMS URL";
$tempField['#field_name'] = "field_comments";
$tempField[0]['#markup'] = $vars['content']['comments'];
// Add it into the group (fieldset/group name you copied)
$vars['content']['group_commentsgroup']['field_comments'] = $tempField;
}
This will basically add your comments markup into an empty fieldset/group you created using node's manage display using fieldset/fieldcollection. Also, I was using ajax_comments for this.
This is more of a tip than an answer to your problem, but our website stopped using Drupal comments since they were too basic and moved to use the free service called Disqus
After a looong time of searching For Individual Collapsible comments I found a solution, where you can put your comment replies in an individual collapsible fieldset. :)
Below code in script.js
Include the js in .info file as scripts[] = js/script.js
(function($) {$(function() {
// Hurry up and hide the comments and its replies, if present. In most browsers, this
$('.indented').hide();
// The Comment section will be turned into a toggle to
// open/close the comments
$('.comment').addClass('closed').bind('click', function() {
var $self = $(this),
$form = $self.siblings('.indented'),
speed = 250; // speed of animation, change to suit, larger = slower
if ($self.hasClass('open')) {
$self.addClass('transition').removeClass('open');
$form.hide(speed, function() {
$self.addClass('closed').removeClass('transition');
});
}
else {
$self.addClass('transition').removeClass('closed');
$form.show(speed, function() {
$self.addClass('open').removeClass('transition');
});
}
});
}); })(jQuery);