How to make split Jquery Mobile Layout for iPad? - javascript

I really like the type of page shown here:
http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/pages/docs-pages.html
But I cannot find in the source anything that says where the "Anatomy" or anything on how to get the navigation bar and content area.
How do I make/get the content area and navigation area like the one shown in the demo?

I'm also looking for a solution to this as it's a very useful layout for navigating records. But viewing the source is a headache since the structure isn't simlar enough to the API and there's a couple dozen css classes interacting with each other.
But i did discover a split-view plugin which might work:
http://asyraf9.github.com/jquery-mobile/

just as in the last answer - http://asyraf9.github.com/jquery-mobile/
There is a link to: https://github.com/asyraf9/jquery-mobile/
There is a repository zip file download link in the top left.
But when you get there, and you look at the file viewer and so on it seems kinda confusing. When you look at the files close enough they are the same resource doc files from the JQ Mobile site.
***The difference is in the file structure: demos\experiments\ you will see the a "splitview" directory. You can use the contents of that dir for reference.

Related

Edit existing items in a Wordpress theme

I've created a homepage, that simply has a sentence as the content
I've edited the settings so that this the front page of the website.
However, given the theme that I am using, when I go to the home page, this is what I see
I can see the content of my home page at the very bottom, but before that, there is a slider and a couple of blocks (that presumably come with the theme).
I'd like to know either how to remove these default blocks, or edit them myself to include links to other pages.
Also, as you can probably tell, I am very new to Wordpress. Are there any good documentations for beginners that would teach me how to create pages, edit and customize them so that I can have control over the whole page (as a regular website)?
I think you should edit by the php file, so if u don't know PHP start here.
Go to : menu > appereance > editor.
Here u see all the files you need. The file you should edit change with the theme.. so go through the code.
Maybe, it's under header.php
The html code you get above your content is inserted from the page template assigned to your homepage. Thus, if you want to modify it somehow you should go Editor Panel in Appearance Menu, then edit desired template. You can also create your own template with structure you actually want and assign it to that page.
As for a documentation, I think you're going to be good with the official one.
You can edit it by going appearence->editor with php code, be careful when you doing this
if you want to edit a header, you can find header.php in that particular theme
same with footer.php and you customize the design by clicking appearance->customize

Is there any way on how to download bootstrap templates (with HTML) from the ones they made and shown as examples in ther official website

Is there any way I could download the exact custom templates that Bootstrap made? Like the Dashboard, Signin page, Cover page, Carousel page http://getbootstrap.com/examples/carousel/ and more.
Is there a way to do this without manually copying their source codes from the developer tools/inspect element >> resources?
Because even if I download from their customize page (http://getbootstrap.com/customize) it only returns the very basic bootstrap pack-- the bootstrap.js, bootstrap-theme.js, bootstrap.css, glyphicons.. there is no even html template included.
Bootstrap always keeps a Github repo of all the resources whether it be documentation or HTML or CSS or JS.
You can find all their relevant documents and the examples at their Github repo.
The ones you are specifically looking for can be found here.

Big Cartel - JQuery Upload/Location

Here is a link to my site, http://johnathonpowers.bigcartel.com
Trying to play around with images on my product pages...well actually created a test page.
Unable to figure out a few things:
Where does one host a jquery file?
Do I need to have the jquery src for both jquery.min.js (many use the one hosted by google, if I am understanding any of this correctly) and jquery.elevatezoom.js?
If I end up not liking the zoom is this still an appropriate way to have a large image with small thumbnails beneath (perhaps I will explore how to click on the big image to open a full-screen version).
Should all my pictures be the same size? Right now I have square format photos and rectangle...it might end up looking horrible.
Do I put any code into CSS or just the layout and the specific page I want the images to take place?
Will these images replace the ones I upload through bigcartel's system?
There is already a jquery entry in the layout...do I just add to the end of this same section the additional src?
This is what I added to layout:
<script src="http://s000.tinyupload.com/index.php?file_id=24823496361920795072" type="text/javascript"></script>
This is my test page:
<img id="zoom_01" src="http://i.imgur.com/1L86Fcms.jpg" data-zoom-image="http://i.imgur.com/1L86Fcm.jpg"/>
$("#img_01").elevateZoom();
<head><script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script></head>
<img id="product_zoom" src="http://i.imgur.com/1L86Fcms.jpg" data-zoom-image="http://i.imgur.com/1L86Fcm.jpg" class="fade_in">
Thanks again for all the help and honestly probably biting off more than I can chew. I just wanted to play around with it and see if it would work/was something I liked, but seems like I have gone down a rabbit hole into a whole other world, way above my rudimentary html skillset.
Here is where I first saw the jquery stuff:
Can I integrate an Internal zoom on my products in my big cartel store?
The best place to host your javascript files is on a server that you have control over -but if you don't have any webspace, you can easily host files with a service like Dropbox or Google Drive.
The Luna theme you're using already loads jQuery in the <head> portion of your Layout, so you don't need to include that script again (and you'll get errors in your browser's javascript console if you try).
Since you're using a separate image zooming library that has a bunch of custom CSS, you'll probably want to have your CSS file hosted on a separate server as well. It's a good idea to put any files you're including in the Layout section, following the same format as the existing theme files.
It looks like the javascript file you're hosting on tinyupload.com is just bringing up a download page instead of actually loading the javascript content into the page, so you'll definitely need to change how that's loaded. Otherwise the HTML code you're using looks like it should work.

I would like to make my menu effects disappear

I am new in web development. I am using the following Wordpress theme: http://test.dominikos.com/
I'd like to disable the top menu effects and make it look like simple white boxes with links.
Obviously there is a JavaScript code that needs to be disabled which I can't find.
Is there a way to locate the file via Firebug?
Thanks in advance
You need to purchase before making changes
Hi, you can't edit the free templates on WordPress. You first need to purchase the theme and then look for the JS which is causing this.
View the source code to view the file
However, You can still view the source code, just go to the link that you're on. And right-click and select View Source Code or try the keyboard shortcut of CTRL + U. You'll see the source code of the website.
Go and buy it and then edit it
But remember that you can't remove or edit the files and layout of the free templates.
Go and buy it, then you'll be able to edit its view! Otherwise, you might need to create your own template by using this scratch of source code. Then you'll be able to create the theme of your own choice.

Editing Source Code in Wordpress

The company I am working with hosts their webpage on Wordpress. They want me to edit some of the code in order to do various things, such as enable a photo container to be a moving slideshow.
Figuring out the javascript and html to achieve the results they desire is not problematic for me. However, I am unsure how to get full access to the Source Code of the site. I have privileged access to the backend of the site but in wordpress when you go to edit it only shows some of the basic html tags while hiding the <div> and <script> tags and code. Is there any way edit the page in its source code format? I don't want to have to go through the simplified and less expressive/less control Wordpress interface, and I don't even know if I can achieve the desired results with it.
If you try and edit individual pages you're approaching the problem in the wrong way. You probably want to be using a plugin or modifying a plug-in to create the slideshow you need. There are many plugins for wordpress that do what you seem to need.
slider-widget is one such pluging
In Wordpress, there are two main parts to the website's front and backend: the core WP files and the theme that is used. (And other important aspect to a WP site is the database, where all content is stored, including text/images entered in the admin backend.)
Core WP files are not to be changed because they get overwritten with each update. What you want to work with is the theme. Look in Appearance>>Themes and see what the active theme is for the site. It will also tell you the name of the folder the theme files are in.
With FTP, go to root/wp-content/themes/your-theme-name. That's the php, html and css source of the displayed part of the site. Uploaded images are in /uploads/, and plugins in /plugins/.
See http://codex.wordpress.org/Theme_Development to get an idea of how themes are built and how to modify them.
See the rest of the docs at WP to see how to work with plugins, add other javascript correctly so it doesn't conflict with WP's included javascripts, etc. All the docs you really need are at wordpress.org

Categories