My application is using JQTouch. The demos show how to GET an html file and display it in the user interface, but I'm loading JSON that I would like to use in a pre-existing DIV. I don't want to create a separate people.html and generate that on the server.
So I have a DIV like this that I would like to load my list of people into the UL.
<div id="people">
<div class="toolbar">
<h1>People</h1>
Back
</div>
<ul class="rounded">
<li class="sep">F</li>
<li>Flintstone, <em>Fred</em></li>
<li>Flintstone, <em>Pebble</em></li>
<li>Flintstone, <em>Wilma</em></li>
<li class="sep">J</li>
<li>Jetson, <em>Elroy</em></li>
<li>Jetson, <em>George</em></li>
<li>Jetson, <em>Jane</em></li>
<li>Jetson, <em>Judy</em></li>
</ul>
</div>
This page is loaded from the start of my application with code that looks like this (it's all in the same HTML page):
..snip..
<li class="arrow">View all</li>
..snip..
What do I need to do to call my people.aspx service which returns JSON? I think I need to use $.getJSON, create a UL from the JSON, and then call something in jqtouch to transition to my people application page (div).
I think you use the goTo function, e.g.
jQT.goTo("#people")
There's a jsfiddle demo here, but it doesn't test the jqTouch functionality.
Related
Trying to write a converter from Figma design to HTML/cSS. What I've followed so far:
Fetch the data for a particular Figma file by hitting a GET request using the FIGMA_TOKEN and FILE_ID
Parse the file to find children/components and extract the style properties to eventually convert it into CSS
Where I'm stuck and not able to figure out is how to structure the UI elements in proper HTML. For eg., the hierarchy and the tags to create a usable HTML code
In the UI here, I've like the following HTMl to be generated:
<div class='container'>
<h3>Template List Activities</h3>
<div class='content__wrapper'>
<h6>Account Name</h6>
<div class='meta'>
<ul>
<li>Activity Type</li>
<li>Yesterday</li>
</ul>
</div>
</div>
</div>
Just need some guidance on how to approach this
Is there a way to link to a form using only HTML/CSS? I am still a beginner in web dev and have not yet started on JavaScript or JQuery.
So what I want to do is,
<div>
<ul>
<a href="??" target="_parent">
<li class="toggle1">Guest</li>
</a>
<a href="??">
<li class="toggle2">Owner</li>
</a>
</ul>
</div>
...in the tags in the I want to link to a form which has elements like First name, Last name etc, such that when I click on "Guest" the form for the guest should appear and likewise for "Owner"
There is! Make the href tags to #guestform and #ownerform. Then, make each form's id attribute those values (guestform and ownerform). This looks like so:
<div>
<ul>
<a href="#guestform">
<li class="toggle1">Guest</li>
</a>
<a href="#ownerform">
<li class="toggle2">Owner</li>
</a>
</ul>
</div>
<form id="guestform">...</form>
<form id="ownerform">...</form>
Then, in the css, do the following:
form {
display:none;
}
form:target {
display:block;
}
Hope this helped you!
EDIT: As sdcr said, the a tag should be inside the li, and not the other way around for it to be semantically correct. It should be like this instead
<div>
<ul>
<li class="toggle1">
Guest
</li>
<li class="toggle2">
Owner
</li>
</ul>
</div>
I may have misinterpreted your answer based on the lack of information given.
If you don't care who the end user is, and make both forums accessable to them no matter if they're a guest or owner, you'd simply create another HTML document and link to that document (provided that your web server can serves "static" content).
For instance, say you created another file called owner_form.html and somewhere within the body, you had:
<form>
...
</form>
From your index.html you could link to owner_form.html via a <a> tag like this:
... Contents that will redirect you
(old answer)
No, this is not possible in only HTML and CSS. Not even (securely & validly) with JavaScript.
HTML and CSS don't have the ability to differentiate the client using the page on their own. And JavaScript can't securely do this either.
You should look into server-side programming. This is where the magic would happen for you. You can try many different frameworks / scripting languages that have web-server functionality to them, for instance, some of the popular ones are:
Ruby on Rails
PHP
NodeJS
Django
I am using a cms which has a page where new content is added via ajax.
So the content is constantly updating but there are no page refreshes.
This is typically the html for each piece of content which gets added.
<li class="row-1" style="display: block;">
<div class="content">
Body text for content 1
</div>
</li>
As more content gets added the html will look like
<li class="row-2" style="display: block;">
<div class="content">
Example text for content 2
</div>
</li>
<li class="row3" style="display: block;">
<div class="content">
some more example text for content 3
</div>
</li>
etc
On my page load I have jquery being executed for the content which is already existing.
What I would like is jquery to be executed for each new content as it gets loaded on to the page.
Would I create the jquery individually for each item, then load the jquery when each item gets added to the page.
Or would I create a jquery function which detects when new content is added?
For now to begin with I would just like to alert when new content gets added so I can see how it is done?
Thank you for reading and any help provided.
Check answer to this SO question that could be a solution to bind the event on successful ajax load.
This might be the way you want to go for your website.
So what you can do is load the jquery with the elements itself and bind events to these elements.
I'm currently running Oracle Applications Express on my corporate network (for an internal project) and I am simply trying to make the Logo that I have used to link to the home page. The logo appears on every page and when a user clicks on the logo, it navigates them back to the home page.
I've tried all sorts of different strings, like
$('a[href*="HOME"]')
<a href="/">
<a href="f?p=300">
etc. etc.
My application is lying on Application 300, since this is the development version. The home URL is: f?p=300:1:17112837468263
Is what I am asking actually possible to do?
Thanks
When you define the logo on the application attributes, it will be shown on pages because it has been included in the page template(s).
For example, on my apex (4.2) instance I'm using "Theme 24 - Cloudy". In the "One Level Tabs - No Sidebar" template the logo substitution string #LOGO# is used in the "Definition > Body" section:
<header id="uHeader">
#REGION_POSITION_07#
<hgroup>
#LOGO#
<div class="uAPEXNavBar">
<ul>
#NAVIGATION_BAR#
</ul>
</div>
#REGION_POSITION_08#
</hgroup>
<nav>
<ul>
#TAB_CELLS#
</ul>
</nav>
#REGION_POSITION_04#
</header>
#REGION_POSITION_01#
#SUCCESS_MESSAGE##NOTIFICATION_MESSAGE##GLOBAL_NOTIFICATION#
<div id="uOneCol">
#REGION_POSITION_02#
#BOX_BODY#
#REGION_POSITION_03#
</div>
header > hgroup > a if you didn't spot it.
As you can see, the logo here is already wrapped in an anchor which refers to the homelink #HOME_LINK#. This homelink is something you can define aswell by the way. You can set the homelink through "Application Properties > User interfaces" and selecting the interface you use, for example "Desktop". "Home URL" is a field there.
So what you should do is:
Check the theme you are using
Check the default page template (and any other used page templates of
course)
See where the #LOGO# substitution string is used and how it is put
out
If it isn't in an anchor yet you can do that. If you aren't on apex 4.2 (You didn't specify) I'm not sure if you can use #HOME_LINK#, I can't recall. You could always use string substitution syntax however (and you should, especially when constructing these types of links): href='f?p=&APP_ID.:1:&SESSION.'
I'm making a really simple website and was curious how I can modularize the content sections of the body while leaving the static portions of the site alone. I figured using partials would be the key but they operate much differently than I had originally thought. This is my first time using Angular so I'm not very familiar with anything just yet.
Right now the site has a simple design similar to the following:
<div id="wrapper">
<div class="header"></div>
<div class="sidebar">
<ul>
<li><a href={{option.path}}>Option 1</a></li>
<li><a href={{option.path}}>Option 2</a></li>
<li><a href={{option.path}}>Option 3</a></li>
</ul>
</div>
<div class="content"></div> <------ content changes with selected option in .sidebar
<div class="footer"></div>
</div>
Barring the inherent syntax errors here, what can I do so that when I click on an option in .sidebar such that the {{option.path}} won't just be appended to the URL?
Currently, this is what I have happening:
I have my site open on index.html where the .content section is completely empty.
The user then chooses an option and I want to direct their browser from /index.html to /partials/option1.html.
If the user then click AGAIN on option 1, their browser directs to /partials/partials/option1.html, which returns a 404 error.
Is there a way to avoid the problem in part 3 or is that simply how partials are meant to work?
Angular JS uses $route to designate partial templates to URL's. You will also need to learn about ngView to make this work.
I admit egghead.io is a great resource for Angular but I think you are in need of this specific screen-cast => http://youtu.be/i9MHigUZKEM
This LinkedIn group also contains every Angular.js resource I have come across.