I have 7 icons all with the same size. The icons are displayed next to each other using display: inline-block; For the sake of explaining the problem I like to name the icons (A, B, C, D, E, F, and G.)
5 of these icons are viable "ie. (A, B, D, F, G)" and 2 are hidden "(ie. C, E)"
When a user clicks on icon B, I want to hide icon B and show icon C instead. Also, when a user click on icon D I want to hide icon D and show E.
I am able to use show() and hide() to accomplish what I need. however, the problem is in that the gap between the icons as it is not the same size.
In other words, when icon C becomes viable after clicking on icon B the gap/margin between icon A and icon C will show larger than the gap that was between icon A and icon B.
To demonstrate the problem virtually, I created a fiddle page for review
How can I do the show/hide without changing the gaps "margin" between the 2 images?
Below is my html markup "it is also in the fiddle.
<div style="text-align: center; display: block;">
<div style="display: inline-block;">
<div id="icwsButtonPhoneOff"><img class="interaction" id="disconnect" src="http://s13.postimg.org/4i0cnu18z/icws_red.png" alt="Disconnect Call" title="Disconnect Call"></div>
</div>
<div style="display: inline-block;">
<div id="icwsButtonHoldOn"><img class="interaction" id="resume" src="http://s15.postimg.org/fbpwulmcn/icws_hold.png" alt="Resume Call" title="Resume"></div>
</div>
<div style="display: inline-block;">
<div id="icwsButtonHoldOff" style="display: none;"><img class="interaction" id="hold" src="http://s17.postimg.org/jsbh1libf/icws_resume.png" alt="Place On Hold" title="Place On Hold"></div>
</div>
<div style="display: inline-block;">
<div id="icwsButtonMuteOn"><img class="interaction" id="unmute" src="http://s7.postimg.org/mgr5tqqpz/icws_unmute.png" alt="Un-Mute Call" title="Un-Mute Call"></div>
</div>
<div style="display: inline-block;">
<div id="icwsButtonMuteOff" style="display: none;"><img class="interaction" id="mute" src="http://s8.postimg.org/vd71colmp/icws_mute.png" alt="Mute Call" title="Mute Call"></div>
</div>
<div style="display: inline-block;">
<div id="icwsButtonTransferCall"><img class="interaction" id="mute" src="http://s18.postimg.org/n4jxcru3p/icws_transfer.png" alt="Transfer Call" title="Transfer Call"></div>
</div>
<div style="display: inline-block;">
<div id="icwsButtonConferenceCall"><img class="interaction" id="mute" src="http://s8.postimg.org/i42b42bnl/icws_conference.png" alt="Start a Conference With all Parties" title="Start a Conference With all Parties"></div>
</div>
</div>
You are doing the display:none; on the wrong elements. Do the display:none; on the parent elements of the image you want to hide.
For example, instead of :
<div style="display: inline-block;">
<div id="icwsButtonMuteOff" style="display: none;"><img class="interaction" id="mute" src="http://s8.postimg.org/vd71colmp/icws_mute.png" alt="Mute Call" title="Mute Call"></div>
</div>
do:
<div style="display:none;">
<div id="icwsButtonMuteOff"><img class="interaction" id="mute" src="http://s8.postimg.org/vd71colmp/icws_mute.png" alt="Mute Call" title="Mute Call"></div>
</div>
The reason is that all of the blanks spaces and/or line breaks are adding up.
EDIT:
I didn't want to spend much time at all on this fiddle, but look at what i did for the pause icons. Lot less code.
https://jsfiddle.net/grtLd0qk/10/
This is because you're show/hide the inner div ( the one with id ) but not the outer one. Just do
$('#icwsButtonHoldOff').click(function() {
$('#icwsButtonHoldOn').parent().show();
$(this).parent().hide();
});
and move style="display:none;" to the outer div will do.
Or even better, you can have only one div and assign a common css class to all 7 icons that set display:inline-block. This way your javascript will just need to toggle the status, no more .parent()
Related
I'm trying to animate a chat. Every time the user clicks on the input field or "send" icon, I want the chat bubbles to appear one after the other. This is my part of my code so far. Right now, they all have "display: none." The picture below shows them without it.
<div class="messages">
<div class="message" id="msg1" style="display: none;">Hi! I'm looking for an old friend. She attended Martin Grove a few years ago.</div>
<div class="message" id="msg2" style="display: none;">Her name is Sam.<br>
<i>*insert pic of Sam and MC*</i></div>
<div class="message" id="msg3" style="display: none;">Did you know her or her last name by any chance? </div>
<div id="msg4" class="message-teacher" style="display: none;">Hello there!</div>
<div class="message-teacher" id="msg5" style="display: none;">Unfortunately, I did not have the pleasure of teaching Sam. Her last name and whereabouts are a mystery to me as well. </div>
<div class="message-teacher" id="msg6" style="display: none;">However, I do know she was in the photography club. I always saw her carrying a camera, always taking pictures. </div>
<div class="message-teacher" id="msg7" style="display: none;">In fact, I believe she won a contest for one of them. </div>
<div class="message-teacher" id="msg8" style="display: none;">She’s a super talented girl!</div>
<div class="message-teacher" id="msg9" style="display: none;">Best of luck on your search. I hope you two are reunited soon!</div>
</div>
<div class="input">
<div class="plus-icon" style="font-size: 25px; color: #2A84FF; margin: auto;">
<i class="fas fa-plus-circle"></i>
</div>
<div class="subinput" style="font-size: 25px; color: #2A84FF; margin: auto;">
<input type="text" placeholder="|" />
<i class="fas fa-smile"></i>
</div>
<div class="btn" style="font-size: 23px; color: #2A84FF; margin: auto;"><i class="fas fa-paper-plane"></i></div>
</div>
I would query for the required elements, create an array out of it, and shift() (aka remove the first element of the array - or you can use pop() to remove the last element, depending on your needs). When you pop or shift an element from an array, those functions return the removed element and we can remove the CSS class that hides those elements in the DOM.
const myHTMLCollection = document.getElementsByClassName("invisible");
const HTMLElementsArr = [...myHTMLCollection];
function showMessage() {
if (HTMLElementsArr.length > 0) {
HTMLElementsArr.shift().classList.remove('invisible');
}
}
.invisible {
display: none;
}
<p class="invisible">Some text 1 click</p>
<p class="invisible">Some text 2 clicks</p>
<p class="invisible">Some text 3 clicks</p>
<button onClick="showMessage()">Show a message</button>
I have a problem regarding jquery selectable , I have div that contains user information , this is my div
<div class="user-container" id="append_users">
<div class="fc-event draggable-user" ondblclick="sys.callUserProfile('+user.id+')" id="user_'+user.id+'"style="z-index: 9999;" onmousedown="sys.mouseDown()" onmouseup="sys.mouseLeave()">
<div class="container-fluid">
<input type="hidden" value="'+user.id+'" id="user_'+ user.id + '_value" class="userId">
<div class="row">
<div class="col-xs-3 avatar-col">
<img src="'+getUserImage(user.avatar)+'"width="100%">
</div>
<div class="col-xs-9 data-col">
<p class="fullName dataText" >'+user.fullName+'</p>
<p class="usr_Gender dataText" >Male</p>
<div style="position: relative"><li class="availableUnavailable"></li><li class="usr_profesion dataText" >AVAILABLE</li></div>
<p class="user_id" style="float:right;margin:3px">'+user.employee_id+'</p>
</div>
</div>
</div>
</div>
</div>
and I need the whole fc-event div to function as one , so the div with id="append_users" should contain the selectable class and the div with class fc-event should be considered as selection , I tried like this
( "#append_users" ).selectable();
but all childs take the ui-selectee class and it doesn't function at all, so what I want to do is the div with class fc-event should be considered as one, I hope i am clear, anyone please help
The documentation doesn't make it hugely clear, but from looking at the code and descriptions of the demos on the jQueryUI website (http://jqueryui.com/selectable/) it can be seen that the element you execute the "selectable" command against is intended to the container for the things you want to be selectable. It will automatically make all the child elements of that element into things which can be selectable. This is logical because generally you'd want to have several selectable items in a list and be able choose one or more items to select.
So if you want your "append_users" element to be selectable, you have to make the parent of that element the target of your "selectable" command. You haven't shown what the parent is, so for the purpose of example I'm going to assume it's just another <div>:
HTML:
<div id="selectable">
<div class="user-container" id="append_users">
<div class="fc-event draggable-user" id="user_1" style="z-index: 9999;">
<div class="container-fluid">
<input type="hidden" value="1" id="user_1_value" class="userId">
<div class="row">
<div class="col-xs-3 avatar-col">
<img src="https://i.imgur.com/db4KgSp.png" width="100px">
</div>
<div class="col-xs-9 data-col">
<p class="fullName dataText" >user.fullName</p>
<p class="usr_Gender dataText" >Male</p>
<div style="position: relative"><li class="availableUnavailable"></li><li class="usr_profesion dataText" >AVAILABLE</li></div>
<p class="user_id" style="float:right;margin:3px">user.employee_id</p>
</div>
</div>
</div>
</div>
</div>
</div>
JavaScript:
$("#selectable").selectable();
See http://jsfiddle.net/s6Lmy70b/2/ for a working demonstration.
(N.B. This is using very slightly adjusted markup compared to yours, just for demonstration and to make it easier to get it working, but the principle is the same regardless of the exact content being displayed)
I'm trying to center an input box on the center of the page. When you click the button "Prices" It should show a text box right under the button centered. Instead, it's showing all the way to the left.
Here is what I have:
<div class="header-content">
<div class="header-content-inner">
<h1 class="text text-primary vintage-retro sr-intro">IFixIT Repair</h1>
<hr class ="sr-intro">
<p style="font-family:Arial;" class ="text sr-intro">Repairs By Students, For Students</p>
Schedule Repair
</div>
Prices
<div id="repair-prices" class="text-center collapse">
<input class="typeahead form-control" name="search" placeholder="Model of Device (i.e. iPhone 6)">
</div>
</div>
With this, I get this result after the button click:
The box is all the way to the left.
Any help would be awesome! If you need to see anything else, let me know. Thanks!
Try using the <center> tag, that may help.
If you are using HTML5, this does not work and you must center using CSS.
Try using add some css in input class. Because when you used form-control class it has display:block property, so that it will take 100% of width.
.typeahead.form-control{
display:inline-block;
width:auto;
min-width:280px;
}
.btn.btn-primary.sr-intro{
margin-bottom:10px;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="header-content text-center">
<div class="header-content-inner ">
<h1 class="text text-primary vintage-retro sr-intro">IFixIT Repair</h1>
<hr class ="sr-intro">
<p style="font-family:Arial;" class ="text sr-intro">Repairs By Students, For Students</p>
Schedule Repair
</div>
Prices
<div id="repair-prices" class="text-center">
<input class="typeahead form-control" name="search" placeholder="Model of Device (i.e. iPhone 6)">
</div>
</div>
I dont know whether is correct, but i have tried your code with fiddle
>>> fiddle demo <<< without form-control class
add this and remove form-control class
.text-center {
text-align: center;
}
your form-control class in search is 100% width, so you cant center it.
I have a emoticon palette which has the form like this :-
Categories div and then the emoticons div:-
<div class="emoticonbox" ng-if="showEmoticons">
<div class="categories_emo">
<span ng-repeat='cat in EmoticonCategoryPositions | limitTo: (EmoticonCategoryPositions.length-1)'>
<img ng-if="currentEmoticonCategory==$index" ng-src='{{emoticonDirPath}}tabs/emo_{{$index+1}}_tab_selected.png'
class="emoticon_tab" ng-click='setEmoticonCat($index)'/>
<img ng-if="currentEmoticonCategory!=$index" ng-src='{{emoticonDirPath}}tabs/emo_{{$index+1}}_tab.png'
class="emoticon_tab" ng-click='setEmoticonCat($index)'/>
</span>
<div class="categories--control">
<div class="rect rect--left" ng-click="moveleft()"></div>
<div class="rect rect--right" ng-click="moveright()"></div>
</div>
</div>
<div class="wrapEmoticons">
<img ng-repeat='emoticon in emoticonList[currentEmoticonCategory]' src='{{emoticonDirPath}}{{emoticon}}'
ng-click=' addEmoticon(EmoticonCategoryPositions[currentEmoticonCategory]+$index);main.messageClickFocus()' class="emoticons"/>
</div>
</div>
I want to add left and right arrow keys in the categories div so that I can browse categories by clicking the respective arrow.
I have added as you see above categories--control and with this javascript.
$scope.moveleft=function(){
var widthOneItem = parseInt($(".sticker_tab").first().css("width"))+parseInt($(".sticker_tab").first().css("margin-left"))+parseInt($(".sticker_tab").first().css("margin-right"))+parseInt($(".sticker_tab").first().css("padding-left"))+parseInt($(".sticker_tab").first().css("padding-right"));
console.log(widthOneItem);
$(".categories_sti").animate({scrollLeft: "-="+widthOneItem});
console.log("Moving Left");}
$scope.moveright=function(){
var widthOneItem = parseInt($(".sticker_tab").first().css("width"))+parseInt($(".sticker_tab").first().css("margin-left"))+parseInt($(".sticker_tab").first().css("margin-right"))+parseInt($(".col-md-3").first().css("padding-left"))+parseInt($(".col-md-3").first().css("padding-right"));
console.log(widthOneItem);
$(".categories_sti").animate({scrollLeft: "+="+widthOneItem});
console.log("Moving Right");}
Doesn't seem to work as required, no movement at all.
I have a banner which I need changing on a click. at the moment I have hidden the 2nd banner and currently banner 1 shows. When I click the arrow I want banner 1 to hide and banner 2 to show etc.. only problem I tried using html.
<div class="homeArrow"><img src="https://cdn1.iconfinder.com/data/icons/defaulticon/icons/png/256x256/arrow-right.png" alt=""/></div>
i want homeArrow to be the click button to show next banner
but not sure how to connect to jquery...
This is JS fiddle:
http://jsfiddle.net/8a7GL/152/
Hide / Show one Banner at a time:
$(".homeArrow").on('click',function () {
$(".homeImage").slideToggle();
});
http://jsfiddle.net/8a7GL/152/
Sliding from left to right can be achieved by a little more code in jQuery see:
http://www.learningjquery.com/2009/02/slide-elements-in-different-directions/
You could also use addClass/removeClass and make the sliding CSS3 transitions. This would greatly improve quality.
UPDATE:
Here is the left / right slidy.
HTML:
<div class="homeBannerContainer" style="display: block">
<div id="a1" class="homeImage">
<h4>Banner 1</h4>
<img src="http://www.nostomachforcancer.org/wp-content/uploads/2013/08/nsfc_scam_banner_50percent.jpg" alt="" />
<div class="homeBanner">
<h3>My banner</h3>
</div>
</div>
<div id="a2" class="homeImage" style="display: none">
<h4>Banner 2</h4>
<img src="http://www.nostomachforcancer.org/wp-content/uploads/2013/08/nsfc_scam_banner_50percent.jpg" alt="" />
<div class="homeBanner" style="display: none">
<h3>My banner 2</h3>
</div>
</div>
<div class="homeArrow">
<img src="https://cdn1.iconfinder.com/data/icons/defaulticon/icons/png/256x256/arrow-right.png" alt="" />
</div>
CSS:
$(".homeArrow").on('click', function () {
$('.homeImage').animate({
width: 'toggle'
});
});
DEMO:
http://jsfiddle.net/8a7GL/174/
You can use the show/hide function provided by jquery and even give it an animation.
Just give the banners a selector and use the .click event.
http://api.jquery.com/toggle/
function change(){
$("#firstbanner").toggle();
$("#secondbanner").toggle();
}
In HTML:
<button onclick="change()" />
try this:
if ($('#Banner2Home').is(":visible")) {
$('#Banner2Home').hide();
} else {
$('#Banner2Home').show();
}
return false;