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");
}
...
});
Related
I have homepage which is created by using multiple small template pages in wordpress. I have set menus on it . now i want to go on particular section/ template using menu. like if i press contact menu button then it should go smoothly downwards of homepage where the contact template has been called. I am using "Page scroll to id" plugin of wordpress but its not working. I have also seen that this plugin work when the page is created by dashoard page. Please help me , how can i navigate to my template page/section using this plugin. If any other plugin is there , please tell me about it . i will try to use that too.
Thanks
To create smooth scroll on link click follow the below steps :
Step 1: Add section ids in menu href including #section1 from admin section Appearance >> Menu .
Step 2: Create section or div with id name section1.
<div id="section1"></div>
Step 3: Paste the below code under your custom js file.
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
I hope it will helps you.
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");
I want to add css styles to my login page. The application works as:
ion-side-menus where is:
ion-side-menu-content inside of it is:
ion-nav-view name="content"
Controller looks like:
.state('myapp.login', {
url : "/login",
views: {
'content': {
templateUrl: "myApp-core.login.html",
controller : 'LoginController'
}
}
})
The problem is that when I changed a main css it causes on all sub pages but I want to change only my login page (myApp-core.login.html). Thanks for any help.
Simplest make your own css class "xxx-login" and apply it on html tag?
if you want to extend ionic class, you can use Less, ionic provide all tools to build it.
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.
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.