I am trying to integrate jquery cycle plugin and it works fine. I have navigation controls also in my slideshow. But the problem is that I need to set the controls as background image and should not display the prev next, pause and play links(texts). Please find my code below. If I delete the text of links(previous, next, pause and play) the slideshow wont work. So is there a way to make this text transparent so that user cannot see these links and only images are visible. Please help.
Previous
<div style="height:25px;width:25px;display:inline-block;background:url('Images/play.png')no-repeat transparent">Play</div>
<div style="height:25px;width:25px;display:inline-block;background:url('Images/pause.png')no-repeat transparent">Pause </div>
<div style="height:25px;width:25px;display:inline-block;background:url('Images/next.png')no-repeat transparent"> Next</div>
</div><!--controls-->
You can give it either of these CSS parameters:
display:none; or visibility:hidden;
The first one will remove it from the DOM so it won't take up space. The nice thing about this is it's directly interfaced with JQuery's show() and hide() functions.
The second one will keep it in the DOM and just make it invisible so other elements surrounding it will respect it's presence and the layout will remain unchanged. To toggle this with JQuery you'll want to use $('element').css('visibility','visible');
Related
Background:
I'm trying to create a rotating image banner with several links, each link being different. The FIGURE are set inside a DIV which is nested inside another DIV for centering and positioning purposes.
Current JSFiddle:
Available here without WebKits.
Problem:
Although I tried with several combinations, inside the markup and CSS, never does it trigger the anchor in any of the images (I have not set any effect on hovering yet, not to confuse the code). I deleted the anchors so you can see the base code before the tests I did. It functions now as perfect Pic Slideshow, yes, but that is not the intent.
Need:
To know what to do with an A tag for it to work on each of the images separately, in order to transform the PIC SLIDESHOW into an alternative to a Slider.
Code type restrictions:
I do not wish to use a JQuery in the solution, only CSS, HTML and the smallest JavaScript possible if everything else fails
Many Thanks
I'm struggling to replicate the login form found at the top of the PayPal website.
I have been able to create the username and password fields including the 'blue glow' from searching the web for tutorials; however, I'm unable to find any coding to add the 'clickable' question mark to the field.
I would like to be able to replicate the drop down when the question mark is clicked.
Any help will be greatly appreciated.
I hope I have made it clear.
What you could do is in your form have the question-mark image trigger a java-function... Ex:
<img src="my_image.jpg" onClick="myjava_function()">
Then in your java function you could have a div containing the drop-down displayed.
<script type="text/javascript">
myjava_function(){
document.getElementById('mydiv').style.display="block"
}
</script>
Then in near the form you could have your div that contains the drop down first being hidden but shown on the click.
<div id="mydiv" style="display:none;"><form><select><option value=1>1</option></select></form></div>
This would be my approach to getting it done. Firstly, try and get a log that is similar to the question mark, and position it in the div that you would place your area at. In the CSS for the logo apply float right so that the logo would appear to the right of that div. Then build a whole div that appears when you click the log before hand and give it the CSS display none, hence it would not be shown. Write a javascript function that works with the onclick you apply on the logo that changes the CSS of that div to display block and hence the whole div appears when you click it. The div by itself has a cross mark that could trigger another javascript call to change the CSS to display none. Good luck.
Please help, this is really making me go crazy.
I am somewhat new to Javascript, and am trying to work with the Dojox.mobile framework...
Basically, what I want to do is have a button, that goes to a <div> which is located before the current one when clicked. This needs to be a normal html <button> or <div>, and can't be a ul, li, heading or similiar, since it is located in the middle of the view, not on the top or any sort of border (the exact location is given in the style tag)..
I tried implementing the dojo.back framework, but I can't seem to get it right with what should load or what should go where.
I tried implementing it with the OnClick property (which is how I implement all other buttons that go forward), but it causes total overlapping between all the divs.
I tried implementing it with the moveTo property, but I think that's only available to ul and li elements, not normal buttons or list elements (and if they are available to normal divs, I have no idea how to implement them).
And I have honestly no idea what else I can do, please help!
For dojox.mobile.View, there's a function called performTransition which can switch from one view to another. Here's a quick example of something you might could use:
HTML:
<div id="first_view" data-dojo-type="dojox.mobile.View">
<p>First view you see</p>
...
</div>
<div id="second_view" data-dojo-type="dojox.mobile.View">
<p>Second view</p>
<button data-dojo-type="dojox.mobile.Button"
data-dojo-props='onClick:function(e){goBackToFirstView();}'>
Back
</button>
</div>
JavaScript:
function goBackToFirstView () {
// load the view that should be visible
var secondView = dijit.registry.byId("second_view");
// transition slides back one
secondView.performTransition("first_view", -1, "slide");
}
I am working with the Google Engine for a class, and I had a question about css tabbed menus. I found a tutorial for tabbed menus, here is the link to that one if it matters:
http://www.marcofolio.net/css/sweet_tabbed_navigation_using_css3.html
I was wondering if anyone knew of a way to make it so that it didn't have to reload the page every time I click a link in the menu. Basically have it already have the info in memory and change just the text, or only refresh a specific part of the page. I have no idea what types of stuff you might need, but I basically copied that code exactly, and used the app engine and template inheritance to get the different page info. Let me know if you need other info. Thanks in advance.
WWaldo
I can suggest at least two possibilities using JavaScript; you could either target the links in your CSS menu items towards:
Altering the content (e.g., the value of the src attribute) of a main iframe element (for example), or revealing/replacing preloaded content into/out of div element(s); and/or,
Trigger an AJAX call to a server to determine an update, and update the contents of the required components (e.g., div) dynamically.
The difference is pre-loading all the page content first (1) as opposed to accessing it dynamically on command (2). If you don't have control over a server to implement AJAX in suggestion (2), then (1) will suffice, but at the cost of offloading the work (and downloads) to the client.
Both approaches will require dynamic update of page contents using JavaScript. The 'net is littered with examples of this; check out this one, for instance.
It is actually quite easy to make a tabbed menu in HTML, with CSS, javascript is not needed for my design. I did this example in about 1/2 an hour.
Here are some screenshots of my example. (I Censored My Name Out Of The URL, And I Cropped Them)
All you do is make 3 boxes, With links to other webpages in them. It can look the same in all the pages. It is recommended to make rounded corners.
<div id="Tab1">Tab Numbah One </div><div id="Tab2">Tab Numbah Two </div><div id="Tab3">Tab Numbah Three </div>
Go into your external CSS sheet, make them all float left, and on the same line, make it look pretty, and you NEED a border of some sort.
Then make an overriding style in each of your pages. Make the bottom border non-existent, so it looks like the tabs of a binder. I changed the color, so when you were on that page, it looked a bit better. Note, I indent my CSS very unusually.
Page 1
#Tab1 {
border-bottom:none;
background-color:white;
}
Page 2
#Tab2 {
border-bottom:none;
background-color:white;
}
Page 3
#Tab1 {
border-bottom:none;
background-color:white;
}
My company is starting to move toward adding the iPad as a browser i have to test my work on. This got me thinking...
Since touch-based clients don't have a :hover state are pure CSS dropdowns going to go away?
Then i thought even if you add some javascript to make the menus popup on click... What happens when the menu item (that expands to another menu) is also a link. How do you tell the difference between a click to see the menu or a click to go to that link?
What's going to happen with dropdown menus when touch based clients become more ubiquitous? Are there any workarounds out there yet?
Pure CSS dropdowns are possible on touch devices thanks to the :target pseudo-class. Basically, the pseudo-class is active for objects that have an id matching the current URL fragment. This means that the URI fragment can be used to store and share state with CSS. For example, let's say we're on http://example.com/, which has the following HTML and CSS:
<style>
#menu {
display: none;
}
#menu:target {
display: block;
}
</style>
Show the Menu!
<div id="menu"> ... </div>
The menu is hidden by default. Clicking or tapping the link will change the URL fragment to "menu" (full URI: http://example.com/#menu). Because now there is an element with an id equal to the URI fragment ("menu"), the :target pseudo-class applies, and the display property is changed.
Further reading:
Usage and Example at Mozilla Developers Network
Implementation of a touch-friendly pure CSS dropdown
This is kind of a design issue forced by a technical issue. I'd probably redesign/reorganize my content into one of three ways:
1- Click-activated mega-menus (example). The downfall here is that you might have real estate issues.
2- Top-Level Category links that lead to Navigation Pages. The downfall here is that it requires an extra page load to get to the content.
3- Make each Menu Item consist of two buttons, one to navigate to the page (the text) and one to expand the child menu (an arrow.) You'd still need, though, to provide the child navigation, if present, on the page the user goes to when they click a menu item.
my nav bar has this functionality (collins.class401.com/nav) for the crap you need
its a modified version of TJK_DropDownMenu http://www.tjkdesign.com/articles/keyboard_friendly_dropdown_menu/default.asp
their version (and mine) uses visibility for :hover
their version also only supports having <a>'s as menu items, while mine also supports <span>s (though using spans breaks their keyboard navigation) if you want something like a form, or a button in your menu, like i have
their version usually works for :hover on ipod touch, as long as you click in the 'white space'
my version is much more friendly to touch devices, and has the clickable arrows to toggle the display using prototype.js,
or, if they can't hover, and javascript is off, setting a php session and reloading the page, then inserting a style to the style tag at the end of the page which will overwrite the visibility and display according to whether the clicked to show or hide