I want to disable this img tag where id is scroll_disable how to achieve this using java script. this image is a arrow key of a carousel of a live shopping website what i want to do is when there is no images for this product i want to disable this arrow.so that user can not scroll further. i need solution in java script only.can i do this onclick() function?
<div id="btn-next" class="f-x3" style="position:relative; float:left; width:30px;height:50px; padding-left:10px; padding-top:20px; overflow:visible">
<p class="f-lp" ><a href="#" class="carousel_carousel next" ><img src="/site/images /arrows1.jpeg" border="0" width="21" height="24" style="vertical-align:baseline" id="scroll_disable" /></a></p>
</div>
how to write java script for this?
Okay, first of all, when you're writing in a language that is not your first, punctuation gets extra-important.
If you don't have to worry about images showing up in the carousel later, try this:
document.getElementById('btn-next').removeEventListener('click');
Check out the following.
http://jsfiddle.net/WRbxe
<img> is not a form element and hence can't be disabled. However if you use <input type="image"> it can be disabled using,
document.getElementById('scroll_disable').disabled=true;
Related
Im using the lastest version of fullpage.js(4.0.10).
I cannot suceed to put it on jsfidle license error block me to use CDN
so I put a really simple part of code here give a copy past it locally will reproduce the problem(and of course link back the fullpage.js and the fullpage.css).
so everything work fine until i click to the "button>a href=here" to go to the slide #here
then I can't scroll up at all I have to scroll all the way down and scroll one more time down to then be able to scroll up upper than the slide id "#here"
I want to be able to after I fire a link to an id element to scroll up.
<button type="button">here</button>
<h1>fullPage.js</h1></div>
<div class="section" id="section1">
<div class="slide" id="here"><h1>Simple Demo</h1></div>
<div class="slide"><h1>Only text</h1></div>
<div class="slide"><h1>And text</h1></div>
<div class="slide"><h1>And more text</h1></div>
</div>
<div class="section" id="section2">
<h1>No wraps, no extra markup</h1>
</div>
<div class="section" id="section3">
<h1>Just the simplest demo ever</h1>
</div>
</div>
code to run locally
The question has been answered here.
I paste:
You can use the anchors option to assign a different anchor to each section:
new fullpage('#fullpage', {
anchors: ['one', 'two', 'here', 'four'],
//your other options...
});
This way the #here anchor will be linked to the 3rd section.
https://jsfiddle.net/g26adykw/
The other option is just using the fullPage.js JS methods such as moveTo.
You can read more about anchors on the fullPage.js docs.
I'm doing something with NVDA (the screen reader) and with aria too, the thing is that i want to make nvda able to read the content that is in a button as a text. For example, i want it to say "Log in dialogue" instead of "dialogue" in the NVDA speech viwer when click on it.
I tried with many aria roles and do things with aria-describedby, but i can't make it work, can someone help me with this? thanks. Here is the line that i'm trying to modify
</div Login Button
Try this:
<a href="%" role="button">
<div aria-hidden="true" class="login-icon"></div>
Login Button
</a>
role="button" will make the anchor link work as a button for screen-readers. When you have an anchor tag with text inside it, you need not give aria-describedby or aria-labelledby. If you want the screen-reader to read out something other than the text you put in the anchor tag (in your case 'Login Button'), use aria-label if its a small text, otherwise you can use aria-labelledby if you want to reference any particular div or h2 or h3 with an id.
If you want to use aria-label, you can do this:
<a href="%" role="button" aria-label="Text other than Login Button">
<div aria-hidden="true" class="login-icon"></div>
Login Button
</a>
I am developing a food website using Spring boot, Thymleaf and Bootstrap. I need to display menu items in a webpage. To display it I am fetching the data from a database and then iterating over it to display. However, I am not able to display it in a single column like this. Any suggestions on how to handle this?
Code:
${menu.mainMenuName}"
You need to move your "th:each" statement to the div tag. It will be something like:
<div th:each="menu: ${mainMenu}" class="col-md-12">
<a class="text-info" th:value="${menu.id}" th:text="${menu.mainMenuName}" href=""></a>
</div>
Note that ${menu.mainMenuName}" is redundant with th:text="${menu.mainMenuName}
I found the solution for it. Problem with my previous approach was it was creating col-md-2 for every link hence it was getting displayed in single line to fix it below approach was followed:
<div class="col-md-2">
<div class="main-menu" th:each="menu: ${mainMenu}">
<a class="text-info" th:value="${menu.id}" th:text="${menu.mainMenuName}" href=""></a>
</div>
</div>
I would like to have a page with both an image gallery and a slideshow. The slideshow should be started when I click the link, the normal ColorBox should be used when I click one of the images.
What I do now is group all the images with a rel. For the slideshow link I use the following code:
<a rel="slideshow" href="#">Display slideshow</a>
In the configuration for colorbox I define rel as the rel I use for the images. This works almost, the problem I have with this is that I get an extra empty page at the beginning.
How can I start a slideshow of an image gallery, using a text link?
I searched for how to do this for a long time, and finally found the answer on - where else - the F.A.Q for Colorbox. The example is worded a bit differently though so it wasn't as easy to find as you might think. Especially if you're asking question in these terms, like I was.
<div style="display:none;"> <!-- optionally hide this div -->
<a rel="gallery" href="/slideshow/one.jpg">Caption 1</a>
<a rel="gallery" href="/slideshow/two.jpg">Caption 2</a>
<a rel="gallery" href="/slideshow/three.jpg">Caption 3</a>
</div>
<a id="openGallery" href="#">Display slideshow</a>
<script type="text/javascript">
var $gallery = $("a[rel=gallery]").colorbox();
$("a#openGallery").click(function(e){
e.preventDefault();
$gallery.eq(0).click();
});
</script>
http://jacklmoore.com/colorbox/faq/#faq-click
I have tried all the suggestions on here I just can't seem to get mine to pop-up in front of my stylesheet in IE. Works in firefox and chrome. Here is a very basic example of my layout.
the website is gulfstreamdata dot com . If you add anything to the cart and then in the top-right click on "expand" it drops down whats in your cart, but in IE it pops-under the template. :(
<div class="vmCartModule" style="position:relative; z-index:900; ">
<div id="dropdown" style="position:absolute; z-index:901;">
</div>
</div>
I tried making both z-index values the same and i tried making the outer div higher. Tried about everything I could think of in IE developer tools to no avail.
Anyway since it is positioned in a position you know, maybe you could detach it from the parent div, and move it after its actual parent div, so it will be drawn on front (also removing the z-index values).
<div class="vmCartModule">
</div>
<div id="dropdown" style="position:absolute; z-index:1;">
</div>
you shouldn't have problems in positioning it relative to the body, since it's on top right of the site.
EDIT
If it pops under your template, move that div to the bottom of your website, maybe right before </body>. I had the same issue with many menu and sub menus and it always worked perfectly.
Do this:
<div id="dropdown" style="position:absolute; z-index:901;">
//your content
</div>
<div class="vmCartModule" style="position:relative; z-index:900; ">
//your content
</div>
See demo in IE8 : http://jsfiddle.net/WtWqX/8/