I am having trouble making link.
I have a slide in a Magento store. Theme is responsive and slider is javascript.
This is the code i have:
<div id="camera_wrap" class="camera_wrap camera_orange_skin">
<div data-thumb="{{skin url='images/camera/slides/thumbs/slide1-thumb.png'}}" data-src {{skin url='images/camera/slides/b1.jpg'}}"></div>
</div>
Slider is showing picture and assosiated thumbnail. I want to make slider clickable but i cant get it working. Any ideas?
If i place
onclick="location.href='newurl.html';"
inside div, image is not showing :(
Any suggestions?
Don't use inline onclicks... Assign your div a class and a custom data attribute. Example:
<div class="onclick-link" data-href="mylink.html">Some content here...</div>
And then:
$('.onclick-link').unbind('click').click(function() {
window.location.href = $(this).attr('data-href');
});
This can be used for all div's you want to turn into a link, bu assigning the class and the data-href attribute.
My link
The easiest (and most semantic) way to make a link, is to use the <a> element.
If you REALLY want to go the javascript way, you can bind a handler using jQuery
$('#camera_wrap').on('click', function(){
// your code
});
Related
I've been trying every single tutorial I found online and none seems to work for me.
I've got these buttons:
<a href='faq.php'><div class='button'>
<div class='button_top'>
</div>
<div class='button_bot'>
FAQ
</div></a>
http://jsfiddle.net/6G8bk/
and I'd like that the top of the button would stay highlighted if the page url is same as href of the button.
Ty for any answers in advance!
Here's the fixed jsfiddle with jquery I tried but still won't work: http://jsfiddle.net/6G8bk/4/
A few things:
In your jQuery, you're trying to select all <a> elements that have a parent class of button, and according to your HTML you do not have (the button class is a child of the <a> element).
The page's URL won't work in JSFiddle because it will get the JSFiddle link, which will be different from the one on your website.
Since you want button_top to be visible on hover, you'll need to use JavaScript. As fas as I know, you can't manipulate another element on hover with pure CSS.
Here is a working Fiddle of what I think you want. I've left comments in the code that might help you.
http://jsfiddle.net/6G8bk/6/
You can retrieve the current url page by using $_SERVER["SCRIPT_NAME"] and comparing it to each element of the menu.
If it match, you put another class in the menu element with CSS rules to have the layout you want.
I'm using an image scroller plugin within a set of divs that are set to randomly show when the page is loaded and then show/hide when an image/logo is clicked on. What I am noticing is that the thumbnail scroller breaks when it's not the first div to be loaded on the page or when another slider is shown.
Here's a link to a demo that I'm working on:
http://sjdunham.com/test/yzn/
I am assuming that it's because of the way that the plugin is loaded:
$(function($){
window.onload=function(){
Since the page is not being reloaded when the divs are shown and hidden and that it only load up for the first div item.
I'm not sure what I would need to change in order for the plugin to load all the div's correctly
You have duplicate ID's, ID's must be unique. Try using a className instead.
<div class="tS2">...</div>
<div class="tS2">...</div>
<script>
$(document).ready(function(){
$(".tS2").thumbnailScroller({...});
});
</script>
I have one area of space and two body's of text to show. I have two "hyperlinks" above this area and would like to use those to show/hide the text below. Upon first loading the page, nothing will be showing except for the two links. When you click one link it shows the body of text. When you click the other link it will hide the previous body of text and show the new text. There are only two hyperlinks, but I would like for the user to be able to toggle back and forth at their convenience. Is this possible? Previously I was using javascript to unhide the text because they were in two different areas. I am not too experienced with writing code. I have found some other answers on this topic useful but most of them use buttons and on click listeners. Is there a way to do this using a hyperlink? Code examples are very much appreciated!
You could define a class in CSS that says "Don't show the text in here" then use JS from the hyperlink click to switch the class of the element?
so your html will contain:
<a onclick="showText('text1','text2')" href="javascript:void(0);">Show Text 1</a>
<div id="text1" class="hide"> text1 </div>
<a onclick="showText('text2','text1')" href="javascript:void(0);">Show Text 2</a>
<div id="text2" class="hide"> text2 </div>
Your CSS would contain:
div.hide { display:none; [your properties]; }
div.show { [your properties]; }
and the your JS would look something like this:
function showText(show,hide)
{
document.getElementById(show).className = "show";
document.getElementById(hide).className = "hide";
}
Does this help at all?
<a id="myLink" href="javascript:void(0)" onclick="javascript:myLinkButtonClick();"> </a>
in javascript you can do this if you use jQuery:
function myLinkButtonClick()
{
$("#myDiv").hide();
}
or
function myLinkButtonClick()
{
$("#myDiv").show();
}
Alternatively you can do .toggle
function myLinkButtonClick()
{
$("#myDiv").toggle();
}
Many will agree that using anchor tags to execute Javascript (and do nothing else) is a little on the messy side, since, among other things, it generates a hash tag in the address bar which can confuse users. That isn't to say that they don't have their place in JS execution.
It is very possible to achieve this however. Here is one possible solution:
Link1
Link2
<div id="div1">Text1</div>
<div id="div2" style="display:none;">Text2</div>
<script>
var currentDiv = document.getElementById("div1");
function show(divID) {
var div = document.getElementById(divID);
currentDiv.style.display = "none";
div.style.display = "block";
currentDiv = div;
}
</script>
The script tag defines a variable and a function: currentDiv, which references the currently displayed div element and a show function, which is used for hiding the currently displayed div and showing a new one.
The anchor tags at the top, when clicked, call the show function, replacing the currently shown element with the one the anchor tag specifies.
In order to get elements to show/hide, the code changes the element's CSS display attribute. A value of block shows the div element, and a value of none hides it. The second div has its display property set to none when the page loads. Javascript will change this attribute when a link is clicked.
No, you do not need JQuery to do this, but it can help.
There's a nice jQuery script that does something along these lines, have a look to see if it's any good for you:
http://api.jquery.com/slideToggle/
This is possible, but a more user friendly way of doing this would be with something like jquery tabs. It's very easy to do it with jquery UI's tab feature, it's all HTML markup with a script that just runs .tabs(); as the function on the ID of the tab element.
Here is a link: Jquery Tabs
Tabs would be the best way to do this. There's plenty of tutorials around for jQuery tabs - here's a fairly basic one which outlines the concepts pretty well, and here's a more advanced one (which goes into using CSS to generate rounded corners on tabs).
I am playing with the following code from this webpage
http://www.dynamicdrive.com/dynamicindex2/crawler/index.htm
Everything works fine but I am having trouble removing the scroller after use, for example if I want to change the content of the page.
Any ideas on how I could do this?
Thanks,
Assign an ID to the scroller element and use
<script type="text/javascript">
function changecontent() {
document.getElementById('scroller').style.display = 'none';
// or
document.getElementById('scroller').style.visibility = 'hidden';
// or completely remove the HTML element
document.body.removeChild(document.getElementById('scroller'));
}
</script>
<div id="scroller"><p>Lorem ipsum</p></div>
<p>Change content</p>
Seeing as you encase your scrolling image box in a div tag you could easily do this using the jQuery library (http://jquery.com/)
Here is an example using scrolling as the div's ID attribute (you would need to add the ID attribute to your current div)
$('#scrolling').hide()
You can find more about this method here: http://api.jquery.com/hide/
Basically I hide all of the answer divs on the page, but I want to show a div if the a user has clicked a bookmarked link to it.
Here's the javascript code
<script type="text/javascript">
$(document).ready(function(){
//hide the all of the element with class msg_body
$(".faq_answer").hide();
//toggle the componenet with class msg_body
$(".faq_question").click(function(){
$(this).next(".faq_answer").slideToggle("normal");
});
});
</script>
The resulting HTML for the section is
<li>
<div class="faq_question">
Question
</div>
<div class="faq_answer">
<p>Text to show</p>
</div>
</li>
EDIT
The question was how do I do it...Figured it out though after the answers here.
window.location.hash will give you the value "#" in your URL. You can use that to build a selector.
// if visiting /index.php#item1
$(window.location.hash).show(); // $('#item1').show();
You can look for the #url-blah in the URL in javascript and display the corresponding section?
I would assume you would need to add a class to the div that hides it and shows it based on the click function
I dont really see a question here though
To accomplish this you are going to most likely need to change your document structure a bit, as you cannot reference any of the specific "faq_answer" items individually.
Typically what I would do here is use a specific ID for each of the answers, then you can use javascript with a show action to be able to toggle visibility.
For an example of my HTML and jQuery code, you can view this page, look at the version history section.