So I have 4 panels on my website that look like folders with tabs. They are all places separate (top left, bottom left, top right, bottom right). When I press the expand button on one of them the fold effect makes the other 3 fold out like folders. So my issue here is I'm not to experienced with jquery just kind of got into it. So 1, the tabs overlap the expanded div then eventually fade out. When I minimize it the other folder come back but they kind of all jump around and eventually end of in their right spots but it looks so messy.
So can anyone see what I'm doing wrong?
Here is the jquery
$("#button3").click(function () {
if (a > 0) {
$(".schedule, .personal, .caseLoad, .notifications").css({
"width": "100%",
"position": "static",
"margin-top": "0px",
"height": "300px"
}, 3000);
$("#effect, #effect1, #effect2, #effect3").show("fold", 1000);
$('[id="calculator"]').hide();
$("#personalTab, #notificationsTab, #scheduleTab, #caseTab").show("fade", 1000);
$("#navPersonal, #navNotifications, #navSchedule, #navCase").hide("fade", 1000);
$("#scheduleTab, #caseTab, #notificationsTab, #personalTab").css({
"width": "20%",
"position": "static",
"right": "20%"
}, 3000);
a = a - 1;
n = 0;
}
else {
$("#effect, #effect1, #effect3").hide("fold", 1000);
$("#scheduleTab, #caseTab, #navNotifications, #personalTab").hide("fade", 1000);
$("#navSchedule, #navCase, #notificationsTab, #navPersonal").show("fade", 1000);
$(".notifications").css({
"height": "600px",
"width": "200%",
"position": "absolute",
"margin-top": "20px",
"right": "20px"
}, 3000);
$("#notificationsTab").css({
"width": "100%",
"position": "absolute",
"right": "92%"
}, 3000);
a = a + 1;
n = n + 1;
}
});
and the panel to one of the panels. They are all similar in size and jquery just different button click
<div class="col-xs-12 col-md-6" style="margin-top: 10px;">
<div id="notificationsTab" class="tab" style="background-color: #AD816B;">
<a style="color: black; text-decoration: none;"> Notification</a>
<div id="button3" class="button4">
</div>
</div>
<div class="toggler2">
<div id="effect2">
<asp:UpdatePanel ID="notifications" runat="server" class="notifications" UpdateMode="Conditional"
ChildrenAsTriggers="true">
<ContentTemplate>
<div class="mCustomScrollbar content3 fluid light">
<table>
<tr>
<td style="width: 15%">
Action
</td>
<td style="width: 55%">
Description
</td>
<td style="width: 30%">
Date Added
</td>
</tr>
</table>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</div>
Related
I'm having an annoying problem while using Spotfire. It happens both in Desktop (my main focus) and Web Client.
I've created a menu that collapses when the uses hover the mouse over it and everything is working perfectly. Well, almost everything.
For whatever the reason, once I try to click on one of the options from the drop-down list that I have inside this menu, the menu closes completely like a Mouseout event has been created.
If i hover the mouse over "Active Only" or "Inactive Only", the menu closes and turns into this (which is the expected behaviour for a Mouseout event)
--
Here is the code used:
$(".side-menu").mouseover(function() {
$(this).css("width", "350px")
});
$(".side-menu").mouseout(function() {
$(this).css("width", "60px")
});
$(".spota").mouseover(function() {
$(this).css("background", "#FEB338")
});
$(".spota").mouseout(function() {
$(this).css("background", "transparent")
});
$(".sel").css({
"display": "'none",
"background": "#FEB338"
})
$(".side-menu").css({
"font-family": "'Roboto', sans-serif",
"position": "fixed",
"top": "210px",
"left": "10",
"margin": "0",
"padding": "0",
"width": "60px",
"list-style-type": "none",
"background": "#404040",
"overflow": "hidden",
"z-index": "99999",
"transition": "width 1s"
});
$(".fa").css({
"font-size": "1rem",
"margin": "20px 30px 0 22px"
});
$(".spota").css({
"display": "block",
"font-size": ".9rem",
"text-decoration": "none",
"color": "#FFF",
"height": "60px"
});
$(".spotli").css({
"width": "350px"
});
.filter-names {
font-size: 13px;
color: white
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="side-menu" style="overflow:hidden; bottom:28px;">
<li class="spotli">
<a class="spota sel" href="#">
<span class="fa fa-search-plus" aria-hidden="true"></span>
<span class="filter-names">Case Filter In: <SpotfireControl id="5d0043f39e1d42a5b7e8b1833f4586fa" /></span>
</a>
</li>
<li class="spotli">
<a class="spota" href="#">
<span class="fa fa-search-minus" aria-hidden="true"></span>
<span class="filter-names">Case Filter Out: <SpotfireControl id="59f89f10d0db4d22a096526bdd118cab" /></span>
</a>
</li>
<li class="spotli">
<a class="spota" href="#">
<span class="fa fa-wpforms" aria-hidden="true"></span>
<span class="filter-names">Show Cases: <SpotfireControl id="51adc4b41ba9403bb63e67e87d9d5ba8" /></span>
</a>
</li>
</ul>
This is the HTML from the drop-down element:
<span class="filter-names">Show Cases:
<span id="7a9723d293f9417f8ec57a9662bc290c" style="display: inline-block;" class="sf-element sf-element-control sfc-property sfc-dropdown">
<div class="sf-element sf-element-dropdown" title="" style="position: relative; width: 81px;">
<div class="sf-element sf-element-icon" style="position: absolute; top: 1px; left: 71px; height: 18px; width: 18px;">
<svg width="18px" height="18px">
<path d="M4,6 l7,0 l-3.5,3.5 z" fill="currentColor" stroke-width="1" transform="scale(1.2,1.2)" class="Down"></path>
</svg>
</div>
<div class="sf-element sf-element-text-box" style="display: inline-block; word-wrap: break-word; width: 63px;">Inactive ...</div>
<select class="sf-dropdown-select" style="color: rgb(255, 255, 255); font-family: Arial; background-color: rgb(0,0,0);">
<option value="0">Any</option>
<option value="1">Active Only</option>
<option value="2" selected="selected">Inactive Only</option>
</select>
</div>
</span>
</span>
Have anyone ever seen anything like that?
You can use the given id from the Spotfire element to use the event.stopPropagation() for .side-menu.
Something like
$(".spota.filter #51adc4b41ba9403bb63e67e87d9d5ba8").mouseout(function () {
event.stopPropagation();
});
This will trigger the stop propagation for the menu, preventing it from collapsing and triggering again the mouseover event.
Asked a similar question here and I received a satisfactory answer for the container box, but as it gets smaller, as you can see, the buttons still each jump to new line as the container "shrinks" to be replaced by another.
This is also true for the "incoming" box but it's not very noticeable and I imagine whatever the answer here is, it'll solve both.
I'd like it to look as if it's a totally smooth transition with nothing breaking:
As you can see the old "divs" break rank while the input doesn't seem to care all that much.
For what it's worth, they're both floats and the code looks like this: (incomplete but you get the idea)
<div class="box-padder">
<div class="step-container">
<div class="step step-1">
<h1 class="box-header">ENTER YOUR ZIP CODE</h1>
<input autocomplete="on" class="input" id="zip" maxlength="5" placeholder="Enter Zip Code" type="tel" value="83406" />
<div class="tcenter">
<div class="next first-next">NEXT <span class="gte">›</span></div>
</div>
</div>
<div class="step step-2">
<h1 class="box-header">FULL NAME</h1>
<input autocomplete="on" class="input" id="full_name" placeholder="Your Full Name" type="text" value="a b" />
<div class="tcenter">
<div class="back">BACK <span class="gte">‹</span></div>
<div class="next">NEXT <span class="gte">›</span></div>
</div>
</div>
Here's the (messy) code governing the transitions:
if (!window.animating && window.step < window.MAXSTEP) {
window.animating = true;
// Necessary for smooth transition; needs work
$('.step-' + window.step).css('float', 'left')
$('.step-' + window.step).css('width', '310px')
$('.step-' + window.step).css('overflow', 'hidden')
$('.step-' + (window.step + 1)).css('float', 'right')
// Start decreasing font size
$('.step-' + window.step).find('.box-header').animate({
'font-size': '9px'
}, sliderSpeedUp, function() {})
// Undo the changes please. For some reason you have to use animate. If you can figure out why,
// tell me because I have no f clue
$($('.step-' + window.step).find('.box-header')[0]).animate({ 'font-size': '23px', 'color': 'maroon' }, 250, function() {})
// Slide boxes
$('.step-' + window.step).slideLeftHide(sliderSpeedUp, function() {
// Buttons
setButtons();
window.animating = false;
});
$('.step-' + (window.step + 1)).slideLeftShow(sliderSpeedDown, function() {
// Buttons
setButtons();
setTimeout(function() {
window.animating = false;
}, 250);
window.step++;
});
}
Here's the sliders I got from this answer:
jQuery.fn.slideLeftHide = function(speed, callback) {
this.animate({
width: "hide",
paddingLeft: "hide",
paddingRight: "hide",
marginLeft: "hide",
marginRight: "hide"
}, speed, callback);
}
jQuery.fn.slideLeftShow = function(speed, callback) {
this.animate({
width: "show",
paddingLeft: "show",
paddingRight: "show",
marginLeft: "show",
marginRight: "show"
}, speed, callback);
}
I have next fiddle jsfiddle where I want to resize text instead of image
Bootstrap
<div class="row">
<div class="col-md-4 header" ><img src="http://www.mandroid.in/demo/srems/images/news_image_01.jpg" /></div>
<div class="col-md-4 header" ><img src="http://www.mandroid.in/demo/srems/images/news_image_01.jpg" /></div>
<div class="col-md-4 header" ><img src="http://www.mandroid.in/demo/srems/images/news_image_01.jpg" /></div>
<div class="col-md-4 header" ><img src="http://www.mandroid.in/demo/srems/images/news_image_01.jpg" /></div>
</div>
<div class="row text">
<div class="col-md-4 ">text</div>
<div class="col-md-4 ">text</div>
<div class="col-md-4 ">text</div>
<div class="col-md-4 ">text</div>
</div>
CSS
body {
height:1000px;
width:100%;
background-color:#F0F0F0;
}
#header_div {
width:100%;
JS:
$(document).ready(function () {
$(".header img").mouseleave(function () {
$(this).stop().animate({
height: "50px"
}, 600);
});
$(".header img").mouseenter(function () {
$(this).stop().animate({
height: "100px"
}, 600);
});
$(".text div").mouseleave(function () {
$(this).stop().animate({
height: "50px"
}, 600);
});
$(".text div").mouseenter(function () {
$(this).stop().animate({
height: "100px"
}, 600);
});
})
So as image, I can change size of image, but text don´t get bigger. Any help is very appreciated. Regards
Use fontSize to change the size of the text. So replace height with fontSize Modify your ".text div" events like this.
$(".text div").mouseleave(function () {
$(this).stop().animate({
fontSize: "50px"
}, 600);
});
$(".text div").mouseenter(function () {
$(this).stop().animate({
fontSize: "100px"
}, 600);
});
See the fiddle.
Functionality:
Users have the freedom to navigate between the 2 frames available for a picture shot. Hence, in the first frame, when the user clicks on the "Right" button; the "Left"button is hidden, the second frame will fadeIn while the first frame will fadeOut. Furthermore, when users are in the second frame and needs to navigate back to the first frame, the user will click on the "Left" button; the "Right" button will then be hidden, the second frame will fadeOut while the first frame will fadeIn.
What has been done:
I have created the 2 frame <div>s and also the method call for the left button and the right button.
Issue:
In the first frame, the left arrow is still hidden, as I have set the class="hidden" for the left arrow. However, when the user navigates to the second frame, the left arrow is still "hidden" while the right arrow is still "shown" when it should be hidden.
Hence, how do I set the conditional check for the 2 frames, such that when the user navigates to the second frame, the "right" arrow is hidden and only the "left arrow is showing", while in the first frame, the "right" arrow is showing and the "left" arrow is hidden.
function Left() {
$('#Photoframe02').fadeOut({
duration: slideDuration,
queue: false
});
$('#Photoframe02').animate({
'left': '1921px'
}, {
duration: slideDuration,
easing: 'easeInOutQuart',
queue: false
});
$('#Photoframe01').fadeIn({
duration: slideDuration,
queue: false
});
$('#Photoframe01').animate({
'left': '0px'
}, {
duration: slideDuration,
easing: 'easeInOutQuart',
queue: false
});
}
function Right() {
$('#Photoframe01').fadeOut({
duration: slideDuration,
queue: false
});
$('#Photoframe01').animate({
'left': '1921px'
}, {
duration: slideDuration,
easing: 'easeInOutQuart',
queue: false
});
$('#Photoframe02').fadeIn({
duration: slideDuration,
queue: false
});
$('#Photoframe02').animate({
'left': '0px'
}, {
duration: slideDuration,
easing: 'easeInOutQuart',
queue: false
});
}
//I think this is a wrong method call to check frame, as both IDs are different
function CheckFrame(page) {
if ($("#Photoframe01").turn("page") = 2) {
// If the page we are currently on is not the first page, reveal the back button
$("#LeftSide").removeClass("hidden");
$("#RightSide").addClass("hidden");
console.log("RoleModels LeftSide is shown");
}
}
.hidden {
display: none;
}
<div id="Active_Camera" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; display: none; z-index=5; top:0px; left:0px; ">
<img id="Photoframe01" class="hidden" style=" position:absolute; width:1920px; height:1080px; z-index:5; top:0px; left:0px;" src="lib/img/Photoframe01.png" />
<img id="Photoframe02" style=" position:absolute; width:1920px; height:1080px; z-index:5; top:0px; left:1921px;" src="lib/img/Photoframe02.png" />
<button id="LeftButton" onclick="Left()">
<img style="width: 250px; height:250px" src="lib/img/Nav/Left.png">
</button>
<button id="RightButton" onclick="Right()">
<img style="width: 250px; height:250px" src="lib/img/Nav/Right.png">
</button>
</div>
I have solved my own issue.
I have employed the method of having an Index attached to each navigation button. Secondly, I have put the available frames into an array, such that it can be called from a list. Hence, I find this method to be simpler and cleaner.
var selectedFrameIndex = 1;
var framelist = ["Photoframe01.png", "Photoframe02.png", , "Photoframe03.png", , "Photoframe04.png"];
function selectFrame(flag) {
if (flag == "1") {
selectedFrameIndex--;
} else if (flag == "2") {
selectedFrameIndex++;
}
if (selectedFrameIndex <= 0) {
selectedFrameIndex = framelist.length;
} else if (selectedFrameIndex > framelist.length) {
selectedFrameIndex = 1;
}
$("#Photoframe").attr("src", "lib/Photoframe0" + selectedFrameIndex + ".png");
}
<div>
<img id="Photoframe" class="hidden" style=" position:absolute; width:1920px; height:1080px; z-index:6; top:0px; left:0px; display: inline-block; " src="lib/Photoframe01.png" />
<table cellspacing="0" cellpadding="0" width="1080" id="photo_stream">
<tr>
<td width="1080">
<canvas id="canvas" width="1920" height="1080" style="position:absolute; z-index:5; top:0; left:0; margin:auto; display:none;"></canvas>
<button id="CameraActiveButton" onclick="TakePicture()">
<img src="lib/img/PAGE04/SNAPNOW.png">
</button>
<button id="LeftButton" onclick="selectFrame('2')">
<img style="width: 250px; height:250px" src="lib/img/PAGE04/Nav/Left.png">
</button>
<button id="RightButton" onclick="selectFrame('1')">
<img style="width: 250px; height:250px" src="lib/img/PAGE04/Nav/Right.png">
</button>
</td>
</tr>
</table>
</div>
i want to slide a div when user click on support button from right to left.i have tried the following code.. but its not working correctly for me...
<script type="text/javascript">
$(document).ready(function () {
$('[id$=aSupport]').live('click', function (e) {
if ($('[id$=hdfsupportcount]').val() == 1) {
$('[id$=hdfsupportcount]').val(0);
$('[id$=divSupport]').css({ 'right': '' }).animate({
'left': '0px'
});
// $('[id$=divSupport]').css('display', 'none');
} else {
$('[id$=hdfsupportcount]').val(1);
$('[id$=divSupport]').css({ 'right': '0px', 'left': '' }).animate({
'right': '30px'
});
$('[id$=divSupport]').css('display', 'block');
}
});
});
</script>
Html code is:
<div>
<asp:HiddenField ID="hdfsupportcount" runat="server" />
<div style="float: right; position: fixed; top: 35%; right: -3px;">
<a href="javascript:void(0);" class="signin" title="Support" id="aSupport">
<img src="support_button2.png" /></a>
</div>
<div id="divSupport" style="height: 500px; width: 270px; float: right; position: fixed;
top: 35%; right: 21px; display: none;">
<div id="ContactMenu">
<div id="topnav" class="topnav">
</div>
<div id="signin_menu">
<div id="signin">
<div style="width: 100%; font-weight: bold; font-size: 22px; color: Black;">
<div style="width: 27px; float: left">
</div>
<div style="float: left; margin-top: 1px">
123-456-7890</div>
</div>
<br clear="all" />
<br />
<p>
<label style="font-weight: bold; color: Black">
Contact Us</label>
</p>
<p>
<label>
Email</label>
<asp:TextBox ID="txtContactEmail" runat="server"></asp:TextBox>
</p>
<p>
<label>
Message</label>
<asp:TextBox ID="txtMessage" TextMode="MultiLine" runat="server"></asp:TextBox>
</p>
<asp:Button ID="btnContactUs" CssClass="signin_submit" runat="server" Text="Send"
ValidationGroup="ContactUS" OnClick="btnContactUs_Click" />
<asp:Button ID="btnContactUsCancel" CssClass="signin_submit" runat="server" Text="Cancel"
OnClick="btnContactUsCancel_Click" />
</div>
</div>
</div>
</div>
</div>
When we click on buttons first time.the div slides to left but when i click on button again i want to slide it to right and div will be hide. ...please help me...
I would handle it like this.
$(function(){
$(document).on('click', '[id$=aSupport]', function (e) {
var dist = 0,
count = $('[id$=hdfsupportcount]'),
support = $('[id$=divSupport]');
switch(count.val()){
case '0':
count.val(1);
dist = 30;
break;
case '1':
count.val(0);
dist = -300;
break;
}
support.stop().animate({
right: dist
}, 500);
});
});
Also, remove display:none; from <div id="divSupport"> and give it a right:-270px; so it appears off the page. It's already hidden from sliding in, so no reason to be display:none;. here's a working jsFiddle showing an example.
I have added the following code and its worked for me.. but still i want if it possible to slide.. like fade in ,fade out..
My working code is:
<script type="text/javascript">
$(document).ready(function () {
$('[id$=aSupport]').live('click', function (e) {
if ($('[id$=hdfsupportcount]').val() == 1) {
$('[id$=hdfsupportcount]').val(0);
$('[id$=divSupport]').css({ 'right': '-27%' }).animate({
'right': '-27%'
});
// $('[id$=divSupport]').css('display', 'none');
} else {
$('[id$=hdfsupportcount]').val(1);
$('[id$=divSupport]').css({ 'right': '0px', 'left': '' }).animate({
'right': '30px'
});
$('[id$=divSupport]').css('display', 'block');
}
});
});
</script>
To move the div relative to where it currently is, set the 'marginLeft' property to a value += or -= the amount to move it by. The above examples effectively work like this:
$('#example').animate({
'marginLeft' : "+=50px"
});
and
$('#example').animate({
'marginLeft' : "-=50px"
});
Here's the full code for the example above which actually calls a function to animate the div.
<script language="javascript">
function example_animate(px) {
$('#example').animate({
'marginLeft' : px
});
}
</script>
<input type="button" value="Move Left" onclick="example_animate('-=50px')" />
<input type="button" value="Move Right" onclick="example_animate('+=50px')" />
<div id="example" style="border: 1px solid black; margin: 10px 0px; padding: 10px; background-color: rgb(238, 238, 238); width: 200px; text-align: center;">This is going to move</div>
For more things to do with jquery Click here.