Jquery: Swap out HTML partials depending on screen resolution - javascript

With the current project I am working on (Using Bootstrap 3), the client has asked for major changes to the structure for mobile views.
I have used Zurb Foundations Interchange in the past: http://foundation.zurb.com/docs/components/interchange.html - Which is just awesome!
I am wondering if anyone has used a bootstrap alternative? Or if you have coded this before, what has been your approach? I'm a little lost in which direction to go on this one. Searching seems to yield little results. I will probably just do this programmatically, but like the idea of JS handling it.
Many thanks

I had to do this for a client and I used the built in Bootstrap visible-xs, invisible-s etc. to end up with several different versions of the page depending on the screen size. It was a bit fiddly but it didn't need any JavaScript and is easy to modify. It's an option at least and as you're already using Bootstrap everything you need is there.

Related

I want edit every single page in wordpress. Is possible?

Sorry if this question sounds stupid but im a noob with wordpress.
I am a javascript developer, and I want make a little game (or games) with wordpress. Opening main page there is a sliding puzzle. After complete, a button appears and clicking there you pass to another page. This is basically the same to all pages.
But I can't find were i put my javascript or HTML code. I create the pages but I can't edit them the way I want, everytime i try to do it i only can edit like word. I cant create, change or edit divs attibutes or tags. To be honest the only thing i can edit is CSS in stylesheet, but is too limited.
I have done the search, try found a solutions or ways to done it but when i look to tutorials is all diferent from what i see.
to give you an ideia I want to do a mix of this:
-> http://www.rustylake.com/room-escape-games/cube-escape-case-23.html
and this
-> https://ebonyriddle.com/
but i don't know how to edit page to page.
can you help me?
Thanks for everything
PS: I know I can do it without Wordpress, but I want use it anyway to learn more about the CMS (because of work) maintain website structure and later learn how to do my own templates or plugins.
To answer your question directly, yes it is possible (and easy, relatively speaking) to add custom code to every page / post of a Wordpress site.
More generally, you’re talking about creating a custom Wordpress theme, which you can find out more about here:
https://codex.wordpress.org/Theme_Development
and here:
https://developer.wordpress.org/themes/getting-started/ (Good suggestion from #ItsGeorge)
Regarding adding custom JavaScript to a theme, your files will need to be enqueued as per these instructions.
Outlining the steps involved in Wordpress theme development would go beyond the scope of your question, but there are plenty of resources online and answers to Wordpress specific questions on wordpress.stackexchange.com. You will need to familiarise yourself with php as well as JavaScript, to take full control of Wordpress.
I would say that developing a game feels like an odd fit... If learning Wordpress is your objective, a blog or personal website might be a better place to start, then you could move onto a game once you are familiar with the concepts involved, e.g. the loop, which plays a huge part in how Wordpress works
Good luck!
The primary focus of WordPress is to put HTML code and JS out of the user. You might manage your extra JavaScript files with your theme customization. If you want to get more control about how your pages are rendering, you should use action hooks and filters. The simplest way for you is to override each page template like this
https://developer.wordpress.org/themes/basics/template-hierarchy/#single-page
The preferable resource to ask Wordpress related questions is https://wordpress.stackexchange.com/

What is the template or framework used to get the sidebar at beta.atmospherejs.com?

This site is responsive and really fast for the effects
What is the template or framework used to get the sidebar at beta.atmospherejs.com ?
I don't know which framework can do it, but there're many good tuts for that similar effects by using css3.
You might have to check first one.
http://tympanus.net/codrops/2013/12/18/perspective-page-view-navigation/
http://tympanus.net/codrops/2014/02/06/fullscreen-overlay-effects/
http://tympanus.net/codrops/2013/08/28/transitions-for-off-canvas-navigations/
http://tympanus.net/Tutorials/AnimatedBorderMenus/

Rich content front-ends/jQueryUI replacement

I've been going around in circles for days on this. I've got a (conceptually) simple website, which is all Javascript/Ajax at the front end, with a minimal amount of hand-written HTML, and lots of C++ on the server. The user basically needs to see a few menus, and fill in a few forms, and they get back pretty tables.
My problem is the actual UI front-end. This is for a sports club, and is not a commercial site, so it doesn't have to be that good. I've been using jQueryUI (there's some jQuery in the JS). I'm using tabs and dialogs, and it's all a bit clunky. I now want to add a couple of horizontal menus, and jQueryUI doesn't do this (there's menubar, on a code branch, but it's unfinished and development stopped 6 months ago). I also want to integrate dokuwiki if possible, which is php. I don't have to support old browsers.
Question: can anyone recommend a lightweight rich content front-end to replace jQueryUI, that will get me going quickly? I can spend a little on something commercial as long as I can quickly prototype without paying anything. A CMS would be Ok - I have some Joomla experience, but I really don't want to write any modules just to get my own JS and a wiki into the site.
Oh - and please suggest something quickly, before the question is closed as pointless and irrelevant... :)
There are a lot of examples.
Twitter bootstrap or flat ui

All scripts AND libraries in ONE js script?

Ok so I am in the process of building my first Javascript 'framework' or 'bootstrap' which will be implemented in combination with a single pre-processed CSS file. I am gathering my favorite content slider, smooth scroller, content slideshow, parallax elements & bg-img, sticky elements, among a few more cutting edge navigational & UI based scripts (cross-browser/platform/device/viewport compatibility and performance). My problem is when constructing my demo page with all combined elements in place loaded and active on the page... well many seeem to require a different version of Jquery to be called in order to function properly. I have managed to get them to work properly while testing by carefully reordering the jquery librarys as they are called in the of the page. Now here is my (2) part question:
How do I get all my JQuery to work properly without loading multiple versions of it (one for each script almost)
I have a sample in my portfolio which I would love to use as the example. http://www.nicholasabrams.com/ (non mobile device version). In the src for that URL you will see only (1) js and (1) css - including the jquery libraries which are ALSO included in the single .js in the begining of the file. Please don't flame me, as I am asking for help. The link above works fine now (with apple as a slight exception)... but I am just trying to eliminate any bad practices I have as I have just started as a web developer at my first large company. Thanks!!
PS: Would post a snippet but its quite a large js file as you would imagine but if you will, please inspect my src and let me know what you think because my sites first load decreased from 22 seconds to 4-7 seconds after doing the above I wish I could just include the latest version of JQuery!)
if I understand you correctly you are loading more than one jQuery library to the page (in different order)? That's a mistake - you shouldn't do that.
What you should do is make sure that the plugins you work with are compatible with the library you are working with. If they're not - wither find other plugins or fix the ones you have to support the jQuery language you are using.
You have a 2 megabyte hi-res background image, that is insane! I would scrap that and the swirl image, while it may look cool to you, it is distracting and may actually make people want to avoid your website. It makes it difficult to concentrate on the text in the middle of your screen. You don't want people to remember the swirling image, but rather your portfolio, right?
You also have 404's on the following:
http://www.nicholasabrams.com/ScrollSpy_files/result-light.css
http://www.nicholasabrams.com/example-images/testing_station.png
404's are bad for several reasons, they are a wasted resource as they slow the loading of your page, because it attempts to find something and does not find it, and, finally, they have a negative impact on your SEO, specifically Google PageRank docks you for any 404's.
Find a way to work with one version of jQuery, it will eventually bite you to have multiple versions of the library and it is a bandwidth killer to have your users load up a bunch of libraries, even if they are CDN'd.

Simple lightbox feedback form? Included screenshot

There are so many lightboxes to choose from, I'm looking for a very lightweight one to use in an embedded javascript widget that would be a single domain name. I saw the perfect one on chainreactioncycles.com, it popped up out of nowhere so I took a screenshot:
I tried looking for info on it on the page source, but couldn't find anything that would let me trace where it came from... Would anybody know of one like this? Or exactly that one?
If not exactly like above, anything similar would be great too, keeping the following in mind:
Very small javascript download (animation not needed)
Self contained, not dependent on any libraries other than jquery (since I'm already using that anyway).
Works in major browsers
Close button (like GetSatisfaction or UserVoice)
Dims background
Avoids javascript namespace conflicts (or can easily be made to avoid them)
CSS styling of lightbox does not interfere with site styling
Have you used an existing lightbox scripts for this same purpose with similar requirements? Did you roll your own? Insights welcome!
What you are looking for is called a modal box.
Here is a list of them
... and here is a striking replica of what you are looking for
Check out Zoombox.. It sounds like what you're looking for... Simple to use... Allows custom content.. jQuery Module... From past experience it covers what you have outlined as requirements etc
http://www.grafikart.fr/zoombox will tell you all you need to know.

Categories