I know this is a real newbie question, but that's what I am! I've been playing with ajax, and I have these two images swapping when I press the two buttons.
Question: How do I make the button have the active state displaying while it's corrisponding image is displaying?
I'm sure I need to do something like set an id on the image, but other than that, I'm not sure...
My code (I'm not displaying the ajax stuff that is making the image swap, because I doubt you need that too):
<div class="wrapper">
<div class="transcriptionbuttons">
<ul class="transcript">
<li class="transcript"><a class="transcriptionhorbutton" href="javascript:void()" onclick="getDataReturnText('/lessons/transcriptions/ajaxcalls/L1horizontal.txt', callback)"></a></li>
<li class="transcript"><a class="transcriptionvertbutton" href="javascript:void()" onclick="getDataReturnText('/lessons/transcriptions/ajaxcalls/L1vertical.txt', callback)""></a></li>
</ul>
</div>
<div class="transcriptimage" id="targetDiv">
<img src="this gets populated with ajax..." alt="">
</div>
</div>
Thank you!
Joel
Edit:
Sorry it wasn't clear. The list items are buttons. Click a list item, and it loads an image in targetDiv. I want the button that is "active" to remain active.
If I understood the question.... you could, for example,
<img id="targetImg" src="this gets populated with ajax..." alt="">
and in your JavaScript callback
document.getElementById("targetImg").setAttribute("src", "new_image_source.jpg");
EDIT
If instead you meant you wanted to change the <a> tag when clicked, you could...
<li class="transcript">
<a class="transcriptionhorbutton"
href="javascript:void()"
onclick="getDataReturnText('/lessons/transcriptions/ajaxcalls/L1horizontal.txt', callback);make_active(this);"></a>
</li>
and pass this into a function which will make the changes you want (admittedly that part is a little unclear)
EDIT 2
<li class="transcript">
<a id="transcriptionhorbutton" class="inactive"
href="javascript:void()"
onclick="getDataReturnText('/lessons/transcriptions/ajaxcalls/L1horizontal.txt', callback);make_active(this);"></a>
</li>
<li class="transcript">
<a id="transcriptionvertbutton" class="inactive"
href="javascript:void()"
onclick="getDataReturnText('/lessons/transcriptions/ajaxcalls/L1vertical.txt', callback);make_active(this);"></a>
</li>
<script>
var buttons = [ document.getElementById("transcriptionvertbutton"),
document.getElementById("transcriptionhorbutton")];
function make_active(el) {
deactivate_buttons();
el.setAttribute("class","active");
}
function deactivate_buttons() {
buttons[0].setAttribute("class","inactive");
buttons[1].setAttribute("class","inactive");
}
</script>
It's not the prettiest solution, but it should give you an idea of how the problem can be solved
Related
I have a header and a footer that work perfectly when the user is on a desktop and has a mouse and can hover over them and navigate everything that way.
The problem is on mobile when there is no mouse, I need everything to work as close to the same as it does on desktop. I was almost able to make the "PROJECTS" drop-down work to my liking when clicked as well as the "CONNECT" drop-up, but I'm having two issues.
The first problem I'm having is when "PROJECTS" or "CONNECT" drop-ups/drop-downs are clicked, when I click off them or I click them again, the drop-up/drop-down doesn't vanish. It becomes constantly displayed block and I need it to go back to display: none when the user clicks anywhere else or clicks "PROJECTS"/"CONNECT" a second time. I thought the "else" statement in the script I'm using would accomplish that, but apparently it is not working and I'm not sure why! What is the best way to make that work?
The second problem I'm having is when the user clicks on the li item "ONE" inside "PROJECTS" or any of the li items inside "CONNECT", I need the background of the clicked element to turn black and the text to turn white right before it loads the link (similar to how it looks on the desktop version using the :hover css). At this point, when they are clicked it just flashes the gray highlight color over the element for a split second. I tried adding the same type of css but changing "hover" to "focus" or "visited" and I couldn't get either to work. What is the best way to accomplish that?
Here is a JSFiddle of all the code: http://jsfiddle.net/xmdzg8vu/
If you view the JSFiddle on desktop, it will be hard to see the issues I'm having since you have a mouse and can hover... hopefully having the code will help with finding my errors though!
HTML:
<div id="background"></div>
<header id="header">
<div id="nav">
<ul>
<li id="projects" onclick="displayDropdown()">
PROJECTS
<ul>
<a href="/one" class="blocklink" target="_self">
<li id="one">ONE</li>
</a>
</ul>
</li>
</ul>
</div>
</header>
<footer id="footer">
<div id="footer-nav">
<ul>
<li id="connect" onclick="displayDropup()">
CONNECT
<ul>
<a href="https://www.instagram.com/" target="_blank" class="blocklink">
<li id="instagram">
INSTAGRAM
</li>
</a>
<a href="https://twitter.com/" target="_blank" class="blocklink">
<li id="twitter">
TWITTER
</li>
</a>
<a href="mailto:mail#mail.com" class="blocklink">
<li id="email">
EMAIL
</li>
</a>
</ul>
</li>
</ul>
</div>
</footer>
JS and CSS are seen in the JSFiddle.
Thank you so much!
UPDATE: I have updated my JSFiddle to remove extra script not applicable to this question. Hopefully that cleans it up a little!
For the second problem, have you tried the :active selector? For example, using part of your CSS code:
#one:focused, #one:visited, #one:hover, #one:active {
background-color: black;
color: white;
}
It looks like there are some issues in your markup. Normally we don't nest ul>a. We normally do ul>li>a.
For problem #1 you could add an onclick event handler to the submenu li to close the dropdown (/dropup) ul when a submenu item is clicked.
Let me know if that works. You might also want to use touch events for mobile (even thought click might work).
I am trying to dynamically load some links from an array(JSON encoded values) as a list inside a div. In my real application this array comes from PHP. I am using insertAdjacentHTML('beforeend', "link content") to set the content.
To style the same I am using "accordion slider" and "Perfect Scrollbar", I have achieved to combine both successfully. I am able to display the links as I want inside the div, but the scroller seems to be disappeared now.
Please check the fiddle here - https://jsfiddle.net/prashu421/2mpL61x7/
If you would check the links that aren't loaded dynamically are scrollable and the scrollbar is displayed there.
I couldn't find any clear reference on the internet for my case.
Any help is greatly appreciated.
Thanks for your consideration.
You're including dynamic HTML on the load event, but initializing the scrollbar on jQuery's $(document).ready() function) which's triggered before the dynamic html load.
So to solve this, put everything in the same function or simply at the end of your document as seen in the code of this fiddle-
https://jsfiddle.net/kumar4215/svhscqcp/
<div id="bloc-accordeon">
<ul class="accordion">
<li id="one" class="files">
One
<ul class="sub-menu" id="firstClub" style="font-size: 12px;">
<!--Container for dynamically generated links-->
</ul>
</li>
<li id="two" class="mail">
Two
<ul class="sub-menu">
</ul>
</li>
<li id="three" class="cloud">
Three
<ul class="sub-menu">
</ul>
</li>
</ul>
</div>
I have some questions about jQuery animations.
But first, This is what I have currently. http://jsfiddle.net/ssmm0714/00vkoopn/
<div id="container">
<ul class="app-lst">
<li class="item-6">
</li>
<li class="item-7">
<a href="#">
<div class="icon closed"><img src="http://s27.postimg.org/5mixcx1j3/arrow.png" alt="arrow" class="arrow-img"></div>
</a>
</li>
<li class="item-8">
<a href="#">
</a>
</li>
</ul>
</div>
I would like the green div to slide with bouncing effect (like easeOutBounce) and push the yellow div out until only the green div's arrow is shown, and the contents of the green div will appear.
(It's like a sliding card effect?)
Currently, I made it so that the arrow spins on click.
Could someone help me with coming up with the desired effect? I tried doing a slide on both, but I do not know how to stop it when the blue div hits the arrow.
Also, as a side question, is it a good practice to put all widths of each divs in percentage form? I did this because this is going to be a mobile web app, and wanted to make it responsive.
Anyways, for reference,
This is the mock up of what I want it to look like after.
http://jsfiddle.net/ssmm0714/9q04nz0d/
<div id="container">
<ul class="app-lst">
<li class="item-6">
</li>
<li class="item-7">
<a href="#">
<div class="icon closed"><img src="http://s27.postimg.org/5mixcx1j3/arrow.png" alt="arrow" class="arrow-img"></div>
<span> I AM THE HIDDEN TEXT! (loaded different HTML file) </span>
</a>
</li>
<li class="item-8">
<a href="#">
</a>
</li>
</ul>
</div>
To add the bouncing effect you will need the jquery-ui lib.
Next thing - you want both the yellow div and the green div to have the same effect (for the hide and show) and the effect should work the same time.
$('li.item-6').animate({'width' :'0'}, 2000, 'easeOutBounce');
$('li.item-7').animate({'width' :'100%'}, 2000, 'easeOutBounce');
Check out this fiddle: http://jsfiddle.net/w84btwsf/1/
Note that I added some workaround to handle small screens and problems with percentages (you can see it in the top of the js part).
Regarding your question about percentages - yes, this is indeed a good practice. You can also use one the the many css-frameworks that helps with developing responsive layouts (bootstrap is one of them).
Sorry if this is such a 'newbe' question, been fighting this for a while...
Seeking to fire an <a href> from within a tag.
Found several ways to do it, however.. the entire script is with-in an <ul>, so script to "click" the <a href> occurs on load of index.html, not when the specific tag is called.
Sorry if confusing; here are some snippets of code that may help explain.
<ul id="menu">
<!-- several <li> to other parts of the site, then: -->
<li>
<a href="#!/WORKHISTORY" onclick="ga('send','event','Internal Links','Work History')">
<span class="over"></span>
<span class="txt1">Work History</span>
</a>
</li>
</ul>
Followed by:
an <article> and a <ul>
Within the <ul>, is a tag referencing the "workhistory" tag.
<li id="WORKHISTORY">
<div class="box">
<a id=wrkhst1 href="/gallery/1426894494/1426894576.jpg" rel="prettyPhoto[1426894494]">
<span class="over"></span>
</a>
</div>
</li>
I have tried to use <script>document.getElementById('wrkhst1').click();</script>
Which works, however it fires at the load of index.html, not with the click of the parent <li>, as it reads the main index page and loads it.
I tried the same script this in the and not using the tag, but same result.
You need to add an eventhandler, for the onclick-event, on the li element. There you simulate the click on the <a> tag.
In code it could look like:
document.querySelector('#WORKHISTORY').onclick = function(){
document.querySelector('#wrkhst1').click();
};
BUT there are very few scenarios where this is needed. I'm sure in your case it would be better to make the <a> display: block; and set it to the size of the <li>. So <a> can do for what it was made for, without any need of javascript.
I want to have a custom button to appear on the right side of my list view header named 'Click Me', which will perform an action via the 'on click' event. As far as I know JQuery does not have a standard way to achieve this but perhaps you know how to achieve this.
As an illustration to what I want to achieve, take a look at http://jquerymobile.com/test/docs/buttons/buttons-icons.html.
Imagine now that you are looking at list headers where the data icon is on the right side and instead of it being an icon it says 'Click Me'. Furthermore, the List Header cannot be clickable like its elements, instead the data icon must be the only clickable element in here.
Please let me know if you have any ideas, even if this is simply impossible to achieve due to JQuery, thanks!
This is what I was looking for:
<ul data-role="listview">
<li data-role="list-divider">
Fruits
<span class="ui-li-count">
<a href="#" data-role="none" data-theme="b">
Button
</a>
</span>
</li>
<li>Apples</li>
<li>Grapes</li>
<li>Others</li>
</ul>
Note that the list divider contains a SPAN which acts as a button... quite ingenious :)
Anyways, thanks for your help!
You are looking for a Split Button list
This is an example you can put two icon buttons inside:
<ul data-role="listview" data-inset="true" style="min-width:210px;">
<li data-role="list-divider">Opciones de platillo</li>
<li><a href="#" >Notas</a></li>
<li>
Tiempo
<div style="float: right;">
Plus
Minus
</div>
</li>
<li>
Comensal
<div style="float: right;">
Plus
Minus
</div>
</li>
<li>Modificadores</li>
<li>Terminadores</li>
<ul>
</div>