How to snap to next section wihout using a jquery plugin? - javascript

I would like to enable/add the ability when visitors scroll that is snaps to the next section. Jquery plugins, such as SmartScroll or Fullpage.js do exactly what I want. But, the problem is I don't know how to add these JS Plugins (coding ability is nonexistent) to my already existing Wordpress site, which was built with a bought theme and WP Bakery.
Is there a way to add this function (snap to next section) with no/minimal coding, by using a WordPress plugin.
If you need more information, just let me know.

Browsers do not implement yet this snap feature even though there are some attempts to do so.
Therefore you can only achieve such effect by using a Javascript library such as the ones you mention.
If you want to use it in Wordpress, then you'll have to find a wordpress theme or plugin that uses such Javascript library, for example, Fullpane theme from Themify, which uses fullPage.js.
I would recommend you with no doubt, to make use of fullpage.js.
It is the most complete library of this kind, the most used and tested and it is maintained full time.

Related

Is there a way to list the settings for an existing JQuery UI .js file?

I am working on a project that has been going for many years. We currently use jquery 1.7.2 and a custom jqueryUI 1.8.21. I am creating a new feature that requires we upgrade jquery, so I am in the process of upgrading to jquery 1.9.1.
The problem is that 1.9.1 isn't compatible with UI 1.8.21, so I need to upgrade UI too. Alright, not a big deal... except that we have a bunch of custom settings in that UI 1.8.21 file, and I need to carry them forward to the new version.
I could recreate the custom theme from scratch using the new UI 1.12.1 version, but it would be very hard and there is always the chance that I will miss some important setting. I am looking for a way to list out the modified settings in the existing file to easily apply them to a customization of the newer version, or to somehow upgrade or recreate the same setting with the newer version.
Is there a tool or automatic way to do this, or am I out of luck and need to just recreate it by hand?
When you download a theme created with ThemeRoller, one of the files is jquery-ui.theme.css. The comment at the beginning has a line like this:
* To view and modify this theme, visit http://jqueryui.com/themeroller/?scope=&folderName=custom-theme&bgImgOpacityError=&bgImgOpacityHighlight=&bgImgOpacityActive=&bgImgOpacityHover=&bgImgOpacityDefault=&bgImgOpacityContent=50&bgImgOpacityHeader=&cornerRadiusShadow=8px&offsetLeftShadow=0px&offsetTopShadow=0px&thicknessShadow=5px&opacityShadow=30&bgImgOpacityShadow=0&bgTextureShadow=flat&bgColorShadow=%23666666&opacityOverlay=30&bgImgOpacityOverlay=0&bgTextureOverlay=flat&bgColorOverlay=%23aaaaaa&iconColorError=%23cc0000&fcError=%235f3f3f&borderColorError=%23f1a899&bgTextureError=flat&bgColorError=%23fddfdf&iconColorHighlight=%23777620&fcHighlight=%23777620&borderColorHighlight=%23dad55e&bgTextureHighlight=flat&bgColorHighlight=%23fffa90&iconColorActive=%23ffffff&fcActive=%23ffffff&borderColorActive=%23003eff&bgTextureActive=flat&bgColorActive=%23007fff&iconColorHover=%23555555&fcHover=%232b2b2b&borderColorHover=%23cccccc&bgTextureHover=flat&bgColorHover=%23ededed&iconColorDefault=%23777777&fcDefault=%23454545&borderColorDefault=%23c5c5c5&bgTextureDefault=flat&bgColorDefault=%23f6f6f6&iconColorContent=%23444444&fcContent=%23333333&borderColorContent=%23dddddd&bgTextureContent=flat&bgColorContent=%23ffffff&iconColorHeader=%23444444&fcHeader=%23333333&borderColorHeader=%23dddddd&bgTextureHeader=flat&bgColorHeader=%23e9e9e9&cornerRadius=10px&fwDefault=normal&fsDefault=1em&ffDefault=Arial%2CHelvetica%2Csans-serif
Follow that link, click the Download Theme button, and you'll be able to download a new version with the same theme.
However, this only specifies the theme. The download page that the button goes to requires you to select the components to include. I don't see any automated way to do that, but there's a comment at the beginning of jquery-ui.js with a line like:
* Includes: widget.js, position.js, data.js, disable-selection.js, focusable.js, form-reset-mixin.js, jquery-1-7.js, keycode.js, labels.js, scroll-parent.js, tabbable.js, unique-id.js, widgets/accordion.js, widgets/autocomplete.js, widgets/button.js, widgets/checkboxradio.js, widgets/controlgroup.js, widgets/datepicker.js, widgets/menu.js, widgets/mouse.js, widgets/progressbar.js, widgets/selectmenu.js, widgets/slider.js, widgets/spinner.js, widgets/tabs.js, widgets/tooltip.js
You may be able to figure out which components to select from this.

Shortcode inside a slider

I am looking for a slider that would be able to display shortcode in WordPress.
For example, I can create a map with the shortcode [awesomeMap id='1']. And I know there are a bunch of sliders out there, but I can't seem to find one where I could add slides that simply consists of
[awesomeMap id='1'],
[awesomeMap id='2'],
[awesomeMap id='3']
And then when I call [show-slider], it would give me a slider with 3 maps. I'm trying to setup the WordPress so that people taking care of it in the future won't have to touch the code too much...
Anyone know of a WordPress slider that would support this functionality.
Check out Layerslider.
It's a pretty robust slider, responsive, and allows the use of shortcodes by providing a place for HTML. I've used this plugin on several projects and just tested it with a map shortcode on one of my sites. Seems to work well. It's always possible you run into plugin conflicts, but it may work for you.

How can I customize the Isotope for Wordpress plugin?

I recently added Metafizzy's Isotope to my wordpress page, but I had some trouble linking it to my posts. As a solution I removed the code I had put in manually, and installed this Isotope for Wordpress plugin.
Has anyone used this and customized it using Isotope's different methods and layout modes? I'm having some trouble locating those key pieces of code (that are so easy to edit when you add isotope manually). This plugin seems to make editing them a bit trickier. If anyone could point me in the right direction I'd really appreciate it.
Thanks!
The isotope is function is called in the includes>js folder in the file called load_isotope.js
You can see the layout mode on line 6. Probably adding that functionality to the plugin would be a good idea.

jQuery: Plain HTML/CSS with core jQuery or jQuery UI for a blog?

I'm about to implement a blog, and I'm pretty sure I want to go with jQuery, because I really like it.
However, when I last did jQuery, I just did plain HTML/CSS and then improved the user experience with what jQuery has to offer. Meanwhile, jQuery UI has been released, and it looks like a full-fledged user interface framework like Ext JS.
Can I benefit from jQuery UI with a rather simple website like this, or is it more geared towards web applications like GMail?
jQuery UI is quite large and seems to have lots and lots of CSS in their skins. I'm a bit worried that I would have to write/adjust tons of CSS to make the blog look like I want it to. If I did plain HTML/CSS, I would have fine-grained control over the appereance.
Edit: I'll stress again that I'm specifically wondering whether jQuery UI is intended for and useful for a simple website like a blog. It is no doubt useful for more sophisticated web applications.
Edit 2: Thanks for all your answers, too bad I couldn't accept more than one. By now I realised that jQuery UI is not like I expected a full-fledged web application framework, but rather a bunch of useful utilities on top of jQuery. I think I'll use it, if only for Draggable, Droppable and Selectable.
You don't necessarily need to write loads of CSS if you don't like the supplied styles.
The jQuery UI ThemeRoller is a very good web-based GUI for customising the look of the widgets. It then allows you to download your own customised (and minified) .css and .js files containing just the widgets you need.
I suggest that you should have a play with that first and see if you can make the demo widgets look how you'd like them before making any decision.
You can have both... I have! Where I am using widgets (datepicker) etc, I use jquery ui, besides visit : http://jqueryui.com/themeroller/ and you can customize the colours quite easily. The UI themes are recommended strongly if you use the widgets as the widgets rely on the css defined therein to move things around, for display and selection, handling rezise of widgets.
You can always build your site using html + css then add the ui theme later, as you said it will increase the user experience greatly... besides we always end up using 1 or 2 features then extend or find other suitable plugins.
As always, the answer is 'it depends'.
More specifically though, it depends on what kind of a UI you're planning on. If you find yourself coding functionality that's already there in jq UI go ahead and use it. They've got a handy theme roller plugin which will allow you to customize the skin to perfectly match the look of your site, so that is a non issue.
You might also want to include it all through a CDN (offered by google or MS) so that your site doesn't get slow downloading the (relatively) heavy initial payload.

Which is your favourite javascript modal plugin?

I'm trying to choose a JavaScript modal plugin to use it on a web site.
I used to use nyroModal (without making any research on this topic) but they have updated it recently and all of the API has changed and, apparently, some of the functionallity of previous version has been lost.
So, I think that this is time to start thinking about whether nyroModal is the right plugin to choose.
I see this question: https://stackoverflow.com/questions/756342/whats-your-favorite-jquery-modal-plugin but I'm not asking for a jQuery plugin, but a JavaScript plugin. The one that you prefer.
This is the functionallity I need:
Launch the modal using an anchor
Launch the modal manually and specify its content
Ability to customize all its content
Ability to attach callbacks on specific modal events
Updated documentation
Thank you!
I think most of the best modal layers are built using a particular framework (i.e. jQuery, mootools, dojo, etc).
By the way, I used several times highslide and it's very powerful!! No frameworks needed :)
I am a mootools fan, and this plugin is my favorite at the moment. It does modal for images, videos, and etc. http://iaian7.com/webcode/mediaboxAdvanced
if you are looking for something similar to what facebook as. David Walsh has a modal plugin called LightBox and its great. http://davidwalsh.name/facebook-lightbox
Both of these plugins are based off Mootools framework.

Categories