I have seen several examples here. But still get confused how to do the following.
I have two screenshots for better understanding.
The first screenshot shows the default view for the mobile phones. But whenever I click the 2nd row (i.e. Rahul Thusso) it will show the screen like screenshot 2.
And when I click the back button i.e. <- the Right panel having details for Rahul Thusso will be gone.
I have used #media .... .master-container-rt{ width: 0%; } but it is static and will not solve my problem.
By default when the screen loads master-container-rt{ width: 0%; } is fine. Clicking the row for Rahul Thusso, ideal screen will be master-container-rt{ width:100%; }and finally click on the <- button master-container-rt{ width: 0% } would be fine.
How to achieve it with Angular JS??
Screenshot 1-default Screen
Screenshot 2-Right panel enabled screen
you can use ng-style or ng-class whichever suits you best. You can use them conditionally also. Following fiddle may help you.
http://jsfiddle.net/ADukg/9326/
You need two functions attached to your scope.
$scope.showBox = function() {
$scope.width = "100%"
}
$scope.hideBox = function(){
$scope.width = "0%";
}
then in your html add ng-style="{width: width}" to your element that you want to show or hide.
and add ng-click="showBox()" and ng-click="hideBox()" to the row element and the back button respectively.
Related
I would like to make panels visible/invisible by button.
in this sample remove/add panels.
But when adding, I need to make a panel and settings again.
I would like to just make panels visible/invisible not delete.
I have googled around and not found samples.
Is it possible??
Thanks to #Robbert reply
I could hide the panel . like this .
$(".amcharts-stock-panel-div-stockPanel1").hide();
However it does not re-adjust the each panel size.
If I call the
So I try like this .
$(".amcharts-stock-panel-div-stockPanel1").hide();
chart.panels[1].percentHeight = 1;
chart.validateNow();
it hide the panel and adjust the each panel height.
However, if you use validateNow() when percentHeight = 1;
this error happens.
amcharts.js:26 Uncaught TypeError: Cannot read property 'translate' of undefined
at b.fixVLine (amcharts.js:26)
at b.adjustBalloonCoordinate (serial.js:17)
at b.showBalloon (amcharts.js:5)
at b.handleCursorMove (serial.js:8)
at b.dispatchMovedEvent (amcharts.js:27)
at b.syncWithCursorReal (amcharts.js:28)
at b.syncWithCursor (amcharts.js:28)
at b.handleCursorChange (amstock.js:2)
at b.a.inherits.b.fire (amcharts.js:1)
at b.dispatchMovedEvent (amcharts.js:27)
my final solution is like this , not use css, but prepare variable panelBack for panel backup.
//removing ...
pos = //panel position.
var panelBack = chart.panels[pos];
chart.removePanel(chart.panels[pos]);
chart.validateNow();
//adding...
chart.addPanelAt(panelBack,1);
chart.validateNow();
By looking at the source of the demo, you'll see that the second Stock Panel gets a classname of amcharts-stock-panel-div-stockPanel1. You could hide it using CSS:
.amcharts-stock-panel-div-stockPanel1 {
display: none;
}
.amcharts-stock-panel-div-stockPanel1 * {
/* hide SVG nodes as well */
visibility: hidden;
}
However, amCharts itself is not aware that this panel is hidden, so it will not re-adjust the height of the first stock panel when "removing" it.
I would advice following the method as seen in the example.
I am trying to use the JQuery Hide and show script to display text on top an image when the div tag is clicked.
The JQuery code I am using is bellow, I have created a JSFiddle to show 2 examples, a before and after with my current result.
UPDATE: I have managed to get the toggle to work and changed some of the CSS. But need div tag hidden until click.
Any help or feedback would be great thanks (Y)
Im sorry about the prev link;
$(".card-options").click(function () {
$(".card-list").toggle();
});
[JSfiddle][1]
[1] http://jsfiddle.net/jinghming/u4epkev4/
Instead Of using
$("#div").click(function(){
$(".box").hide();
});
$("#div").click(function(){
$(".box").show();
});
I used toggle function;
$("#div").click(function () {
$(".box").toggle();
});
*Still working out how to have .box hidden until #div is clicked. But currently does switch between hide and show.
From what I understand, when the little black box is clicked, the list should appear and disappear - I can't see the link to your updated fiddle so here is the update I made to your JS:
$(".card .card-options").click(function () {
$(this).parents('.card').find('.card-list').toggleClass('active');
});
I've also added a display: none; to your .card-list CSS declaration and added the following:
.card-list.active {display: block;}
If you want that bottom bar to be at the bottom of the box then you'd have to do some absolute positioning.
See the updated fiddle here:
http://jsfiddle.net/u4epkev4/4/
You just need to do toggle and you forgot to go into card-text:
$(".card-list").hide(); // Hides the card list at the start
$(".card .card-text .card-options").click(function () {
// Toggle the card-list for the clicked card
$(this).parent().parent().find(".card-list").toggle();
});
Example
I have and radio button selection and given each radio button a progress bar, progress bar are display:none but when selected a radio progress bar will show(), same to the button.
Now my problem is sometime when I selected a radio button, the button show like this:
But sometime when I selected a radio button, the button has been push to the bottom and cant even seen:
I not sure where this problem come from, but I guest maybe the progress bar blocked it?
Maybe I have miss something in my code that I don't know. Anyone able to help me check for this problem ?
Click here for jsfiddle
Updated part
I found out how to make the button push to bottom , hover in and hover out the div 4 to 5 times then select one option, then the button will push to bottom. So far haven't found any solution, anyone know how to fixed please help. Thanks a lot.
Remove the margin-top: -22px from .popup_survey_whitebox_percent and replace with
position: relative;
top: -22px;
Fiddle
Finally I found a way to fixed this problem .
$("#popup_survey_whitebox").hover(function () {
$('#popup_survey_whitebox_content').finish().animate({
opacity: 1,
height: "toggle"
}, 500, function () {
$("label#popup_survey_label_title").text(orig); // Here put the original text.
}).css('position', 'relative');
}, function () {
$('#popup_survey_whitebox_content').finish().animate({
opacity: 1,
height: "toggle"
}, 500, function () {
$("label#popup_survey_label_title").text(newText); // Here put the new text with "..."
}).css('position', 'relative');
});
change $('#popup_survey_whitebox_content').stop() to $('#popup_survey_whitebox_content').finish() for both animate
As you mentioned in your answer, finish works, but introduces some quirkiness for the experience if you hover in/out quickly (it jumps to the end of the animtation immediately, and can "flicker").
This issue can be addressed by reseting the height attribute on the hover 'out' logic. When you hover in/out quickly, the height value is set, which is then used after.
Here's a fiddle with the fix: http://jsfiddle.net/v07vt9gz/5/
And the logic:
$(this).css('height', ''); // reset value
Here is a link to the site in progress -- http://barret.co/resources/testsite12345/
There is almost nothing on the site yet as I am working on the skeleton, so inspecting element should be very easy to pinpoint what's wrong.
I'm working on a slide out menu from scratch but am fairly new to jQuery. Basically, what I have now is working, but not exactly how I'd like it to be. as you can see, when you click the menu button in top left, it slides the panel left and back to the right. I'd like for this panel to initially be hidden upon viewing the page, and then slide out when menu is clicked.
Also, is there an easy way to close this panel if a user clicks onto the main page? The only way it closes now is if the menu button is clicked again.
Any help is very much appreciated.
Thanks in advance!
I think you simply had a mixup with the classes.
Add this to your #left-menu css:
right: 300px;
and then use this:
jQuery(document).ready(function($) {
$('#menu-container #right-menu').click(function(){
var hidden = $('#left-menu');
if (! hidden.hasClass('visible')){
hidden.animate({"right":"0px"}, "slow").addClass('visible');
} else {
hidden.animate({"right":"300px"}, "slow").removeClass('visible');
}
});
}); // end
Add the following: $(".logo").hide() to the $(document).ready(function () {});
I have an element where I'm using the Twitter Bootstrap Affix plugin. If the window gets vertically resized to the point where it is smaller than the height of the item, I'd like to remove the affix functionality from the element since you wouldn't be able to see all of it in the window.
So far I've tried this in the console just to see if it can be removed, but it doesn't seem to be working.
$("#myElement")
.removeClass("affix affix-top affix-bottom")
.removeData("affix");
$(window)
.off("scroll.affix.data-api, click.affix.data-api");
Maybe I'm going about this the wrong way? How Can I programmatically remove the affix from an element that already had it applied?
I ended up going for a mostly CSS solution, similar to what #Marcin Skórzewski suggested.
This just adds a new class when the height of the window is shorter than the height of the element.
var sizeTimer;
$(window).on("resize", function() {
clearTimeout(sizeTimer);
sizeTimer = setTimeout(function() {
var isWindowTallEnough = $overviewContainer.height() + 20 < $(window).height();
if (isWindowTallEnough) {
$overviewContainer.removeClass("affix-force-top");
} else {
$overviewContainer.addClass("affix-force-top");
}
}, 300);
});
And then in CSS, this class just gets added:
.affix-force-top{
position:absolute !important;
top:auto !important;
bottom:auto !important;
}
EDIT
For bootstrap 3, this seems to be effective:
$(window).off('.affix');
$("#my-element")
.removeClass("affix affix-top affix-bottom")
.removeData("bs.affix");
Deprecated: Answer refers to Twitter Bootstrap v2. Current version is v4.
There are few options to try.
Use function for data-offset-top. Normally, you use the integer value, for number of scrolled pixels to fix the element. According to documentation you can use the JS function, that will calculate the offset dynamically. In this case you can make your function to return different number depending on the conditions of your choice.
Use media query to override affix CSS rule for small window (eg. height 200px or less).
I think, the second variant should be suitable for you. Something like:
#media (max-height: 200px) {
.affix {
position: static;
}
}
If you would provide jsfiddle for your problem others could try to actually solve it, instead of giving just theoretical suggestion, that may or may not work.
PS. Bootstrap's navbar component uses media query for max-width to disable fixed style for small devices. It is good to do that not just because the screen size is to small for navbar, but in mobile devices position: fixed; CSS works really ugly. Take w look at navbar inside the bootstrap-responsive.css file.
Your $(window).off is close, according to #fat (author of bootstrap-affix.js) you can disable the plugin like this:
$(window).off('.affix');
That will disable the affix plugin.
See: https://github.com/twitter/bootstrap/issues/5870
On line 1890 of bootstrap is a conditional for whether the default action should be prevented. This allows your to listen for events and if some condition is met, prevent the affix from happening.
line 1890 from bootstrap:
if (e.isDefaultPrevented()) return
Example:
$('someselector')
.affix()
.on(
'affix.bs.affix affix-top.bs.affix affix-bottom.bs.affix'
, function(evt){
if(/* some condition */){
evt.preventDefault();
}
}
);
Even though this was answered, I just wanted to give my solution for this in case someone ran into a similar situation as mine.
I modified the offset top option to a ridiculous number that would never get scrolled to. This made it so I did not have to do $(window).off('.affix'); and disable affix for everything.
$('#element-id').data('bs.affix').options.offset.top = 1000000000;