After installing superfish on my Drupal 7 site, I don't know what to do next. I searched the web and read some brief tutorials, i was told to load the css and js files to my theme. I got Superfish library from https://github.com/mehrpadin/Superfish-for-Drupal, it contains a sample which is used as an example. Could you give me a hint? Thanks in advance!
I don't use any modules when I wanna do that, you can do that by adding just 2 javascript to your theme's .info file. Make sure to place superfish.js before main.js.
scripts[] = js/superfish.js
scripts[] = js/main.js
Add the following code to main.js file:
jQuery(function()
{
jQuery('div#menu_wrapper ul.menu').superfish(
{
delay : 500, // one second delay on mouseout
animation : {opacity:'show',height:'show'}, // fade-in and slide-down animation
speed : 'fast', // faster animation speed
autoArrows : false, // disable generation of arrow mark-up
dropShadows : true // drop shadows
});
});
I dunno a place to download to download the superfish library, but I have it minified in my website. http://abklimo.website-chef.com/sites/all/themes/abklimonew/js/superfish.js
Hope this helps,
Muhammad
The Nice Menus module allows you to create such menus using Superfish. I recommend that you check it out. I am unsure if it uses the same wrapper that you have chosen, but it works reasonably well and comes with documentation.
Good luck!
Related
I'm using the free version of mmenu plugin for wordpress. The menu is working correctly but it opens always from the left, even if i set up another position from the option page.
If I inspect the js file "mmenu.js" it seems that the option is passed correctly as I can see it in the code this string:
extensions: { "all": ["position-top"] }
But if I inspect the HTML source there are still the classes as the menu is setup to be opened from the left: (mm-wrapper--position-left, mm-menu--position-left, ...)
I wonder if this is a known issue or just a problem of my website, and if maybe you have a possible solution.
Thanks in advance
Francesco
I have a WordPress website that has a form which is integrated with a CRM. And it is causing the page to load slowly even with a caching plugin (W3 Total Cache) enabled.
I was wondering whether it is possible to load a particular div after the website has been loaded?
Thanks!
You can easily achieve this with the help of CSS and javascript/jQuery.
Set Display property of that div as none until it hasn't rendered completely in the DOM as:
#divName {
display: none
}
Now, the functionality to display on complete load can be written as :
$(document).ready(function() {
$('#divName').delay(ms);
});
Note: Here, ms is count in milliseconds(1000, 2000, etc.)
I hope this will help. Cheers!
I Just need some Custom CSS code to change my Chat text a bit on an app called DiscordApp,
Auto Scroll To bottom of Page
Custom Text Size
Custom Avatar Text Channel Size
Link to DiscordApp
Link to Example CSS sheet for a random Theme
To inject custom CSS and JS into Discord, you'll need a third party plugin such as BetterDiscord
For the case of BetterDiscord, you have to follow their tutorial for the CSS changes. You can also dive into the settings and add it straight into custom CSS.
TLDR
Create a MyCSS.theme.css file with a META-tag and CSS
//META{"name":"My custom CSSScript","description":"Mine.","author":"Me","version":"1.0"}*//{}
.my-css-class{
/*Example...*/
}
Save this file to %AppData%\BetterDiscord\themes
Reload Discord with Ctrl+R and activate your theme, if you hadn't already
If you want to quickly try out themes or Javascript, hit the Ctrl + Shift + I keycodes. It'll open the developer tools of Discord
Auto Scroll To bottom of Page sounds more of a JS function though, you can easily achieve it by creating a scrollToBottom.plugin.js file containing at least
//META{"name":"ScrollDown"}*//
window.scrollTo(0,document.body.scrollHeight);
the function being inside of a button you place on screen. Discord supports jQuery, so pure javascript isn't even necessary.
The steps for adding javascript plugins is about the same, but inside of the plugins folder instead, and they're called MyPlugin.plugin.js
Note: installing unofficial third party tools or software might leave you prone to hacks, leaks and other security issues.
I am building an app for the first time using Meteor. Due to an accessibility issue, we would like to offer two different Bootswatch themes to the users. I found a very useful explanation of how to switch Bootswatch themes here:
How to dynamically change themes after clicking a drop down menu of themes
(which references a handy fiddle in the accepted answer: http://jsfiddle.net/82AsF/)
I have tried placing the provided javascript inside myapp.html in the <head> tag. I also tried placing it inside the myapp.js file. (Then I tried placing in many assorted places just to see what would happen ;-) )
Nothing I have tried is working and it seems that it is the Meteor framework that is, understandably, "getting in the way". Is there an approach that will work for switching Bootswatch themes in a Meteor app?
Dynamically switching bootswatch themes is easily done as demonstrated in the originally referenced question: How to dynamically change themes after clicking a drop down menu of themes
Meteor (plus iron-router in my case) complicates this a little through the event maps and the simple fact that the dynamic change is occurring in the <head>.
Another answered question explains how to handle an event in jQuery directly (bypassing Meteor event maps): How to handle custom jQuery events in Meteor?
The code snippet below shows how I put the two ideas together. It's all working as expected.
var themes = {
"default": "bootstrap311/css/bootstrap.default.min.css",
"readable" : "bootstrap311/css/bootstrap.readable.min.css",
"slate" : "bootstrap311/css/bootstrap.slate.min.css"
}
$(function(){
var themesheet = $('<link href="'+themes['default']+'" rel="stylesheet" />');
themesheet.appendTo('head');
$('body').on('click', '.theme-link', function (e) {
var themeurl = themes[$(this).attr('data-theme')];
themesheet.attr('href',themeurl);
});
});
I see few plugins for slidshow/rotator in drupal.
http://drupal.org/project/slideshow
http://drupal.org/project/views_rotator
http://www.bywombats.com/blog/06-08-2010/building-rotating-image-banner-views
http://ddblock.myalbums.biz/node/885
/http://drupal.org/project/rotor
I am trying to have an image rotator, similar to http://www.oracle.com/index.html
Thanks ins advance.
There are another cool and crossbrowsing module: http://drupal.org/project/views_slideshow
Main benefit of it is very good customization by css and tpl files. Also it has a good and easy video-guide (link on the module page).
Also this module has some dependenies modules those may be very useful. Check it!
In my experience if you really want full control, you need to build the slideshow yourself. At first this may seem difficult, but it's actually fairly "simple" (depending on your background offcourse).
Drupal uses jQuery and by using the jQuery cycle plugin, you can create pretty much any slideshow.
The jQuery cycle plugin is easy to use:
add the plugin to your drupal installation (download the .js and add it to your theme)
in your template make sure your banner/slideshow-items are all in 1 div or container
write your own js-file with following code (where container stands for ID of the container div):
$('#container')
.before('<div id="nav">')
.cycle({
fx: 'fade',
speed: 2500,
pager: #nav
});
This will create a slideshow on the container div and will create a navigation div before the slideshow with the page-elements. (you will get all kinds of selectors such as .active to get full control over the navigation)
Using a module is ok, but you will need to make changes specific to what you want and sometimes this could take longer then just making it yourself.
If you still would want to use a module, I'd say rotor banner (last update date 25th of may) or slideshow (last update date 5th of april). However I believe slideshow will be too light for what you want to achieve, and rotor banner a bit too heavy...