Converting desktop css to mobile css using jquery

Here is what I have done so far:
I created a basic layout for a test page containing video using Dreamweaver.
I used Media Queries to set up CSS files for mobile, tablet and desktop viewing.
I made changes to the CSS formatting for the mobile view.
Here is what I want to do:
Include jquery script to collapse text on my page when viewed on a mobile device or tablet.
I watched this tutorial about setting it up, but the CSS files were premade, so I am not sure how to make some of the changes:
http://tv.adobe.com/watch/cs-55-web-premium-feature-tour-/how-media-queries-can-make-desig ning-for-mobile-devices-and-different-screens-easier/
Do I place the jquery lines into the source code? and call them out in the CSS? Can jquery be used in the CSS file and where would I insert it and call it out?
The video shows the multiscreen view containing the collapsible text, but he never references where the changes were made. in the source code or in each CSS.
any help is greatly appreciated.

Hi
First I would suggest that you learn to use jQuery on a normal desktop page, (are you talking about using the jQuery mobile framework?) see - http://www.adobe.com/devnet/dreamweaver/articles/introduction-to-jquery.html.
However in the tutorial David shows the jQuery framework file as being inserted at the end of the page, (just before the closing body tag) but doing so means that the page loads before the jQuery code is applied to the page, which has its advantages and disadvantages, but if the jQuery is being used to apply styles/functionality to a page I would recommend placing it into the head content, and the plug-in code at the end of the page.
The above is a personal preference though, and will very much depend on what your jQuery code is doing.
PZ
Can jquery be used in the CSS file and where would I insert it and call it out?
jQuery is a javascript framework and cannot be placed in a css file, but can be used to manipulate the css.
Message was edited by: pziecina

Similar Messages

How to get pop up window in mobile application using jquery

i am trying to implement jquery in my mobile application.iam not getting how to get a popup window

Ram,
Write ur code in event <b>AT USER-COMMAND.</b> Create ur own screen and call that screen for example call screen 100 at 10 10. And after entering the date call the secondary screen.
AT USER-COMMAND.
Effect
Event in interactive reporting
This event is executed whenever the user presses a function key in the list or makes an entry in the command field.
Some functions are executed directly by the system and thus cannot be processed by programs. These include:
PICK
See variant AT LINE-SELECTION
PFn
See variant AT PFn
System command
System command
PRI
Print
BACK
Back
RW
Cancel
P...
Scroll function (e.g.: P+ , P- , PP+3, PS-- etc.)
Instead of this functions, you can use the SCROLL statement in programs.
Since many of these system functions begin with "P", you should avoid using this letter to start your own function codes.
Otherwise, the effect is as for AT LINE-SELECTION; also, the current function code is stored in the system field SY-UCOMM.
Regards,
Prakash.

Converting desktop app to mobile app

hi i have developed a simple java desktop app for making currency conversions, now i want this to work on my mobile, what are the steps to take to convert it, or do I have to start from scratch? thanks

I think it'll be easier to start from scratch. Java ME classes, even those with the same package and class names, are not the same as their Java SE big brothers.
Here's a link to a [J2ME Tutorial|http://today.java.net/pub/a/today/2005/02/09/j2me1.html].
If you have any Java ME related questions, please post them to the [CLDC and MIDP forum|http://forum.java.sun.com/forum.jspa?forumID=76].
luck, db

Developer-Online: Create a Digg login style using jQuery and CSS

Create a Digg login style using jQuery and CSS
Hello Friend, today We'll see how to create a Digg Login panel using only CSS3 and a bit of jQuery script. You'll see how is simple present a login feature using a modal window creates by js. You'll find the .ZIP tutorial visiting: http://www.beatfly.com/download.php
Tags: tips & tricks | JS
Author: patrizio Quatrini
Posted: 2010-02-04 10:57:48
Brought to you by: Developer-Online

Thanks Leonard
On the surface that looks a mighty powerful product that probably goes far beyond what we require. Looking at the system requirements, it seems that some specific Application Servers are needed (is this correct?), which we won't have. Am I correct in thinking this is a modular based product, in that I buy a base product (being LiveCycle ES ... not sure what this product does on it's own) and then add a module such as PDF Generator to it?
It's difficult to glean from the product web site exactly what this product is all about but my gut feel is it'll be a few steps beyond what we need to achieve. I might be wrong, so feel free to pull me up there but it seems this is along the lines of a total back-end Adobe solution.
If you have any other suggestions I'd be grateful, otherwise I may need to continue down the "clunky yet serviceable" HTML to PDF route
Adrian

How to set Css in mobile device + OS using Flex 4.5 Mobile

Hi,
how to set Css for mobile device + OS
is it possible
@media (device : "IPAD") and (application-dpi: 160) and (os-platform: "IOS") { }
Can anyone help to me.

BorderContainer wont resize if the fixed width is specified, if u want to give some minimum width you can use minWidth . Give Width = "100%", now it will get Resizing capabilities

Hide "View Item" ribbon element using jquery or css

Hi,
How to hide "View Item" ribbon element using jquery for a single custom list?
In CEWP, i have tried this:
.ViewProperties.Manage.ListItem#Ribbon {
DISPLAY: none
But this is not hiding the "View Item" option.
How to achieve this?
Thank you

I have tried different CSS and Javascript tricks to hide this item but not successed,
Now one another solution i found is to used the SPRibbon.TrimById method,
So for that you need to create one webpart, and add following line of code to it , add this dll first Microsoft.Web.CommandUI.dll
public void HideRibbonItem()
SPRibbon ribbon = SPRibbon.GetCurrent(this.Page);
if (ribbon != null)
ribbon.TrimById("Ribbon.ListItem.Manage.ViewProperties");
Now call this function to the page load event of webpart,
Now add this webpart to that page instead of content editor webpart,
so it will hide the View Item form the custom list ribbon
Hiren Patel | Please click "Propose As Answer" if this post solves your problem or "Vote As Helpful" if this post has been useful to you.

Is there a way to find out which CSS rules are being used by the different html files?

Is there a way in Dreamweaver CS3 to find out which CSS rules are being used by the different html files, sitewide?
Thanks - Dave

Firefox add-on "Web Developer Toolbar" is a must have. Information > Display Div & Class details.
https://addons.mozilla.org/en-US/firefox/addon/60
Another handy Firefox Add-on to add to your tool chest is called "Dust-Me Selectors."
http://www.sitepoint.com/dustmeselectors/
"It extracts all the selectors from all the stylesheets on the page you're viewing, then analyzes that page to see which of those selectors are not used. The data is then stored so that when testing subsequent pages, selectors can be crossed off the list as they're encountered.
You can test pages individually, or spider an entire site, and you'll end up with a profile of which selectors are not used anywhere."
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

I am trying to create mobile pages using the steps file new new document page from sample mobile starters jquery mobile (cdn). When "page from sample" is selected, the subsequent options are not available. This seems like a silly question, but how do I

I am trying to create mobile pages using the steps file>new>new document>page from sample>mobile starters>jquery mobile (cdn). When "page from sample" is selected, the subsequent options are not available. This seems like a silly question, but how do I acquire these options?

You can get the latest jQuery Mobile Themes directly from jQuery Mobile's web site.
https://demos.jquerymobile.com/1.1.0/docs/api/themes.html
Or roll your own with ThemeRoller
http://themeroller.jquerymobile.com/
Nancy O.

Anchor issues using JQuery Mobile

I am having a lot of issues with getting anchors to work correctly while using JQuery Mobile Starter Page/Template. My instructor gave me a javascript to use, but that too is not working correctly. I've tried many different options on getting it to work and perform correctly and I've had no luck. This is a project that's due next week and as of right now this is the one thing that's holding me back. So basically what I'm trying to do is is when you Click on landmarks it'll bring you to a new page with different city's and when you click a city it'll take you to the anchor so you can start reading my information.
The first anchor controlled by javascript works correctly, but when I add my second anchor and test it it'll go to the first anchors position, but a few paragraphs down. If I add a third it'll only move the page down a tad bit as if it wasn't moved at all.
Much help is greatly appreciated
Explore Ohio
Landmarks
Restaurants
Attractions
Ohio Sports
Ohio's History
Hotels
   Explore Ohio ©2015 MU
Landmarks
Youngstown
Dayton
Columbus
Cleveland
Cincinnati
Akron
Toledo
Youngstown            Mill Creek Park's Lanterns Mill                      Mill Creek Park (officially known as Mill Creek MetroParks) is a metropolitan park located in Youngstown, Ohio. The Trust for Public Land ranks one part of Mill Creek as the 142nd largest park located within the limits of a US city. Mill Creek MetroParks now stretches from the near west side of Youngstown to the southern borders of the city and neighboring Boardman township. The park "encompasses approximately 4400 acres (10.5 km²), 20 mi (32 km) of drives, and 15 mi (24 km) of foot trails" as well as a variety of bridges, ponds, streams, well-tended gardens, and waterfalls. If including the total size of the park system, Mill Creek ranks among the largest metropolitan-owned parks within the city limits of any US city.
The Butler Art Institute
          The Butler Institute of American Art, located on Wick Avenue in Youngstown, Ohio, United States, was the first museum dedicated exclusively to American art. Established by local industrialist and philanthropist Joseph G. Butler, Jr., the museum has been operating pro bono since 1919. Dedicated in 1919, the original structure is a McKim, Mead and White architectural masterpiece listed on the National Register of Historic Places.                     Stambaugh Auditorium                    Stambaugh Auditorium opened in 1926 through the generosity of Henry H. Stambaugh. It is located on Fifth Avenue across from Wick Park in Youngstown, Ohio. Stambaugh is virtually equidistant from Chicago and New York, as well as from Cleveland and Pittsburgh. Cleveland Hopkins Airport and the Pittsburgh International Airport are within an hour; New York or Chicago, an hour's flight. Access to interstates 80, 76 and 11 is a block away. Over a million people live in the immediate 6 county trading area. Youngstown State University with over 14,000 students is two blocks away. There are many other universities and colleges less than an hour by car with a combined student population of over 75,000.
Dayton                    Dayton is the sixth largest city in the state of Ohio and is the county seat of Montgomery County. In the 2010 census, the population was 141,527; the Dayton metropolitan area had 841,502 residents, making it the fourth-largest metropolitan area in Ohio, after only the urban agglomerations of Cleveland, Cincinnati and Columbus, and the 63rd largest in the United States. The Dayton-Springfield-Greenville Combined Statistical Area had a population of 1,080,044 in 2010 and is the 43rd largest in the United States. Dayton is situated within the Miami Valley region of Ohio just north of the Cincinnati–Northern Kentucky metropolitan area.          Carillon Historical Park                              The Park immerses you in the region’s history – from Dayton’s founding in 1796 through two centuries of expansion, industrialism and innovation. Learn about these revolutionary achievements while strolling through the Park’s 25 historical buildings and interacting with the hundreds of artifacts in our exhibits.Where else can you see the original 1905 Wright Flyer III, the world’s first practical airplane and National Historic Landmark, the 1835 B&O (Grasshopper) steam locomotive, and the first automobile self-starter?                     Woodland Cemetery Arboretum                    Woodland was incorporated in 1842 by John Whitten Van Cleve, the first male child born in Dayton.[2] He was the son of Benjamin Van Cleve and Mary Whitten Van Cleve. The cemetery began with 40 acres (160,000 m2) southeast of Dayton and has been enlarged to its present size of 200 acres (0.81 km2). Over 3,000 trees and 165 specimens of native Midwestern trees and woody plants grace the rolling hills. Many of the trees are more than a century old and 9 have been designated "Ohio Champions." The highest point in Dayton is within the cemetery, and during the Great Dayton Flood of 1913, it became a place of refuge.
Columbus
Cleveland
Cincinnati
Akron
Toledo
   Explore Ohio ©2015 MU
Restaurants   Content    Explore Ohio ©2015 MU
Attractions   Content    Explore Ohio ©2015 MU
Ohio Sports   Content    Explore Ohio ©2015 MU
Ohio's History   Content    Explore Ohio ©2015 MU
Hotels   Content    Explore Ohio ©2015 MU

Just to clear up some terminology. An anchor <a> is what we all call a hyperlink. You are referring to the name attribute of the anchor tag. Named anchors are deprecated but whether you use them or element ID's they work the same. Not really sure what you posted after your question - can you just post the code?
>The first anchor controlled by javascript works correctly,
>but when I add my second anchor and test it it'll go to the
>first anchors position, but a few paragraphs down. If I add a third
>it'll only move the page down a tad bit as if it wasn't moved at all.
Is there enough room for the page to scroll? Links to specific locations within a page work by scrolling the page. If there's not enough height left on the page, it can't scroll and can give the impression that it's not working. Is this what's happening? If not, then you'll need to post the code.

Can I use jQuery mobile with Apache Cordova in VS2013?

Hi,
I'm developing my first mobile app. I just need to build a very simple form with a few text fields and a date picker. I was wondering can I use jQuery Mobile for this? I saw an example of using jQuery Mobile with Ajax to call a web service
when user clicks Submit button and wondering if I can use that in VS 2013 Apache Cordova project.
Also, is there a way for user to define data for a couple of fields, like their user id and password for the app? How can that be done so users don't have to enter credential each time they use the app.
Thank you
Thank you

No. You need an officially unlocked iPhone. Contract free DOES NOT equal officially unlocked. All contract free means is that you are not obligated to a contract, nothing more.
In the US, only Apple sells officially unlocked iPhones.

Can I use add-on "imacros" for desktop mozilla on mobile mozilla?

Can I use add-on "imacros" for desktop mozilla on mobile mozilla (last version)? I like this add-on. thanks

No. The iMacros company would need to create an Android version. Given the way Android applications work it would be very hard at best and likely impossible to get iMacros to work on Android.

Device Central devices read mobile css?

I am working with Device Central CS5.5. Are the devices supposed to read the media type handheld css? I have had no success in this. There were a few messages posted, but they didn't seem to me to come to any conclusion. What is it that must be done for the devices to read the mobile css?

slpuyear wrote:
> Nadia provided an excellant link previously. The link is
>
http://www.adobe.com/devnet/dreamweaver/articles/designing_css.html
Hi
I wrote that.
While it is a good intro it isn't a comprehensive solution.
Designing
for mobile devices is fairly complex due to the fact that
many devices
don't read handheld style sheets, they don't even look for
them. You
also have take into consideration how Opera SSR works and how
its triggered.
Cheers jojo
Adobe Community Expert for Dreamweaver 8
http://www.webade.co.uk
http://www.ukcsstraining.co.uk/
Extending Knowledge, Daily.
http://www.communityMX.com/
Free 10 day trial
http://www.communitymx.com/joincmx.cfm

I exported a iphoto slideshow to desktop, converted it to mpg file by using BURN app, burned to DVD and exported to a USB flashdrive. The DVD looks great but flashdrive is extremely fuzzy. What is the difference and how can I make flashdrive sharper?

I exported an iphoto slideshow to desktop, converted it to mpg file by using the BURN app, burned it to a DVD and exported it to a USB flash drive. The DVD looks great and very sharp but the slideshow on the USB flash drive is extremely fuzzy. What is the difference and how can I make the slideshow on the flash drive look as sharp as the DVD?

Export the slideshow out of iPhoto as a QT movie file via the Export button in the lower toolbar. For iPhoto 9.4.3 and earlier select Size = Medium or Large. For iPhoto 9.5 and later selct 480p.
Open iDVD, select a theme and drag the exported QT movie file into the open iDVD window being careful to avoid any drop zones.
Follow this workflow to help assure the best quality video DVD:
Once you have the project as you want it save it as a disk image via the File ➙ Save as Disk Image menu option. This will separate the encoding process from the burn process.
To check the encoding mount the disk image, launch DVD Player and play it. If it plays OK with DVD Player the encoding is good.
Then burn to disk with Disk Utility or Toast at the slowest speed available (2x-4x) to assure the best burn quality. Always use top quality media: Verbatim, Maxell or Taiyo Yuden DVD-R are the most recommended in these forums.
If iDVD was not preinstalled on your Mac you'll have to obtain it by purchasing a copy of the iLife 09 disk from a 3rd party retailer like Amazon.com: ilife 09: Software or eBay.com. Why, because iDVD (and iWeb) was discontinued by Apple over a year ago.
Why iLife 09 instead of 11?
If you have to purchase an iLife disc in order to obtain the iDVD application remember that the iLife 11 disc only provides themes from iDVD 5-7. The Software Update no longer installs the earlier themes when starting from the iLIfe 11 disk nor do any of the iDVD 7 updaters available from the Apple Downloads website contain them.
Currently the only sure fire way to get all themes is to start with the iLife 09 disc:
This shows the iDVD contents in the iLife 09 disc via Pacifist:
You then can upgrade from iDVD 7.0.3 to iDVD 7.1.2 via the updaters at the Apple Downloads webpage.

I've purchased light room on my desktop. How can I use it for my mobile device

I have purchased light room for my desktop computer. How can I access light room on my mobile device using the same account?

jessiepslp wrote:
I have purchased light room for my desktop computer.
Have you purchased a perpetual license or subscribed to a Cloud plan?
To access Lightroom Mobile you must subscribe to a Cloud plan.
Adobe Lightroom mobile – FAQ
"Does Lightroom 5 include access to Lightroom mobile?
Lightroom mobile is included as part of the following Creative Cloud membership plans:
- Creative Cloud Photography plan
- Photoshop Photography Program
- Creative Cloud complete plan
- Creative Cloud Student and Teacher Edition
- Creative Cloud for teams complete plan
If you have access to Lightroom 5 via your Creative Cloud membership, then you have access to Lightroom mobile.
Since Lightroom mobile is a service, it is available only via membership plans. Lightroom 5 perpetual license does not include access to Lightroom mobile"

Any good tutorials for using jQuery and ColdFusion to build mobile apps

Does anyone know of any good tutorials for using jQuery and ColdFusion to build mobile apps?
Thanks!
Lee

I was just this moment looking at this website http://jquerymobile.com/
Then for you a Google search on Jquerymobile and coldfusion
http://www.google.co.uk/search?q=jquerymobile+and+coldfusion&ie=utf-8&oe=utf-8&aq=t&rls=or g.mozilla:en-GB:official&client=firefox-a
http://jquerymobile.com/resources/
Brings me onto this tutorial
http://www.raymondcamden.com/index.cfm/2011/8/26/Making-jQuery-Mobile-templates-even-easie r--with-ColdFusion

Converting desktop css to mobile css using jquery

Similar Messages

Maybe you are looking for