Viewing Code Snippets

Code Snippets



User: Roddy 6 years ago
Judging by the response I have had to the thread about Custom Code, there seems to be a demand for this. I have added a link to Code Snippets on the Code & Syntax section of the EverWeb Widgets site.

So far there are examples of tooltips, creating a tabbed index card and theme breaks using the HTML5 <hr> element and spans.

Text tooltips are not easy to insert in EverWeb using a widget but aren't too hard using code injection. The CSS tooltips work on hover and can open on click on touch devices with the addition of some JS. The touch tooltips use jQuery to allow them to open on hover and open/shut on click when the page is viewed on an iPad or iPhone.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Roddy 6 years ago
I've added some more code snippets and how to insert and use a master stylesheet.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Roddy 6 years ago
The latest Code Snippets are for creating a horizontal and vertical navigation with hover animation and current page indicator.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Roddy 6 years ago
For those who don't want to use code, I have added widgets to the Navigation section of the EverWeb Widgets site for creating an animated Horizontal and Vertical navigation.

The widgets can be used together to create a two level navigation for sites with directories.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Laurens B. 6 years ago
I purchased the Navigation Widgets four days ago. Is there a way for me to obtain the new Animated Horizontal and Vertical Navigation Widgets?

Last edit 6 years ago
User: Roddy 6 years ago
I will be sending out updates soon.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Roddy 6 years ago
In a build up to creating responsive pages with several text wrapped images the first two Code Snippets are for text wrapping an image and clearing floats using a clearfix or a line created using an HTML5 <hr>.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Julie D. 6 years ago
Hi Roddy - I just bought the "Navigation 2 Widgets" pack through your old website, everwebcodebox.com. I'm trying to use the "Icon 2 Level Nav" widget because I wanted the hamburger icon to lead to a drop down menu with sub-menus. It's working the way I was hoping except I would REALLY like the menu to drop from the right side of the MENU tab instead of the left. I've researched for hours, is this possible?
User: Roddy 6 years ago
You can push the navigation button over to the right hand side of the drop down by adding a left margin to it.

The code is pasted into the Head Code box. Use the Site Wide Head Code box in the Site Publishing Settings page if you have the navigation on every page. Otherwise, use the Head Code box in the Page inspector of the pages that have the navigation.

<style>
.navButton{margin-left:288px}
</style>

The value for margin-left is calculated from the navigation drop down width minus the button width.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Julie D. 6 years ago
Thank you, Roddy!
User: Roddy 6 years ago
The full width, viewport height image seems to be popular with Wordpress designers. Here's how to do it in EverWeb.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Roddy 6 years ago
Here's how to make the accordion style toggle boxes used in the demo in the previous post.

Last edit 6 years ago

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Roddy 6 years ago
Viewport height scrolling panels are also possible although a little more complicated.

The last panel has a video showing the future of web design with WebVR (Virtual Reality) coming to your browser soon!

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.


Post Reply
You must login or signup to post.