I make one UI after googling .But my UI is not responsive it not look good when I increase the window size or decrease the window size/.
Here is my fiddle
http://jsfiddle.net/X8HV9/1/show/
I have only two issues
"up level" button it look good when window size is more (full screen).When I decrease the size of window it changes it position.But next and previous button look good.
When you click "add" button it show pop up screen when screen size is more(full screen).but it hide when screen is smaller.
can I give width in %?
<div data-role="page" id="home">
<div class="main_cont">
<div class="cb"></div>
<section>
<div class="contentbox">
<div class="actionbar">
<a href="#" class="previous" id="previous_h"><i
class="iconprev"></i>Previous</a><a href="#" class="next" id="next_h"><i
class="iconnext"></i>Next</a>
<a style="position: relative;top: 6px;left: 89px;cursor: pointer;" id="oneLevelUp">Up level ^</a>
<div class="cb"></div>
</div>
</div>
</section>
<footer id="firstPageFooter">
<button class="addtestbtn" id="addTestCase" data-theme="a" style="color: #ffffff!important;">Add Test Case</button>
</footer>
<div data-role="popup" id="testCaseId" data-theme="b" data-arrow="b">
Close
<div data-role="fieldcontain">
<label for="testCaseIDValue">Test Case ID:</label>
<input type="text" name="testCaseIDValue" id="testCaseIDValue" value="" class="inputTextTestCase"/>
</div>
Done
</div>
</div>
Thanks
Yes you can use % scaling with width,height,top,left,margins
for example in your css:
#next_h{
position:absolute;
width:10%;
}
this will set width to 10% of window's width
if you want to scale when window is below certain width,
you can use javascript:
if($(window).outerWidth() < 500){
$('#next_h).css({
'position':'absolute',
'width':'80%',
'height':'10px'
});
}
something like this.
you might be interested in this post too
Related
Hope someone can suggest or help as I am a bit new. Card below needs to have a fixed width of 38% image area and 62% of content area irrespective of content size (Height can increase if text is more)
Notice in above image the image width changes based on card title. I want the card to only increase in height and have a fixed image/card content ratio as mentioned above.
Card code :
<div class="ibm-columns mainCard ibm-widget-processed ibm-sameheight-processed" data-items=".ibm-card" data-widget="setsameheight" style="width: 100%;">
<div class="uc1 card ibm-col-12-3" style="display:block">
<div class="ibm-card mobileFlex ibm-no-border" style="height: auto;">
<div class="ibm-card__image">
<img id="use-case-img-1" class="thumbnailImage" src="data:image/png;=" alt="card_3"></div>
<div class="ibm-card__content">
<p id="use-case-title-3" class="cardTitle">IBM Watson Learning experience system</p>
<p id="use-case-sub-title-3" class="cardSubtitle">Lear how to find customers</p>
<p class="ibm-ind-link">
<span class="ucExplore">Explore</span>
</p>
</div>
</div>
</div>
<div class="uc4 card ibm-col-12-3" style="display:block">
<div class="ibm-card mobileFlex ibm-no-border" style="height: auto;">
<div class="ibm-card__image">
<img id="use-case-img-4" class="thumbnailImage" src="data:image/png;" alt="card_4"></div>
<div class="ibm-card__content">
<p id="use-case-title-4" class="cardTitle" style="height:78px">UC4</p>
<p id="use-case-sub-title-4" class="cardSubtitle">IBM customer usecase 4 subtitle change</p>
<p class="ibm-ind-link">
<span class="ucExplore">Explore</span></p>
</div>
</div>
</div>
</div>
Adding flex-shrink:0 to ibm-card__image
I have been having a look at several post here with issues similar than this one, but none of them solve my problem.
Here I post the HTML:
<div id="scroller" class="general_scrollingContainer" layout="column" layout-fill layout-align="top left">
<ul class="dynamic-grid" angular-grid="pics"
ag-grid-width="200"
ag-gutter-size="10"
ag-id="gallery"
refresh-on-img-load="true">
<li class="grid" ng-repeat="product in products">
<a ng-href="{{product.link_shop}}" target="_blank">
<img class="grid-img" ng-src="{{product.url_imagen}}" />
</a>
<div class="img-desc-wrap" layout="column" layout-fill layout-align="top left">
<a class="title" ng-href="{{product.link_shop}}" target="_blank" style="font-size:12px;line-height:16px">
{{product.title}}
</a>
<div class="date"><b>Category</b>: {{product.category_name}}</div>
<div class="object_icons_holder" layout="row" layout-align="space-between stretch">
<div flex layout-align="start center" layout="row">
<ng-md-icon icon="share" size="30" style="fill:#666;margin:-5px 0 0 10px" class="social_icon" aria-label="Share Product"
ng-click="showSocialShare($event, 0)">
<md-tooltip md-direction="top">
Share in Social Networks
</md-tooltip>
</ng-md-icon>
</div>
<div class="shop_price">{{product.price}}</div>
</div>
</div>
</li>
</ul>
</div>
The CSS for the class general_scrollingContainer:
.general_scrollingContainer {
overflow-y: scroll;
padding: 0 10px;
width: 100%;
}
and a Javascript with an event that resize the visible height of the div to adjust it:
$(window).resize(function() {
var $main_container = $(window).height();
$(".general_scrollingContainer").css({
"height": ($main_container - 160) + 'px'
});
});
The main div 'general_scrollingContainer' has a fixed height depending on the window height and inside are the elements which overflow the visible area.
The question is that I'm trying to get the event when scrolled to the bottom and need the real height of the div including the height not visible.
Using $('div.general_scrollingContainer').innerHeight(), displays only the height of the visible area of the DIV, the same value than $('div.general_scrollingContainer').height(), so I do not know how to get the whole height.
Any help?
For the height of your content, get the height of the ul-element inside the div. If you have multiple elements, you could wrap it in another inner-content div and get the height of that.
I have 3 chat box nested in its parent and am using jquery to automatically scroll to the bottom the chat messaging area.
chatboxes
The scrolling to bottom work if the chatbox is only 1 but if its becomes two or 3 or more and I append more content to the its message area then the scroll bar will jump to the middle of the div and now it stops scrolling to the bottom as before.
$(document).on("keyup",".textareaxmsg",function(vnt){
if(vnt.keyCode === 13 ){
if($.trim($(this).val())){
var conTent = "<div class='b5d_wa msgb'><div class='d_bzAe_5'><span><span>" +$(this).val() +"</span></span></div></div>";
$(this).parents(".msg_body_a").children(".msga").append(conTent);
$(this).val("");
$(this).parents(".chat_body").children(".msg_body_a").scrollTop($(".msg_body_a")[0].scrollHeight);
}else{
$(this).val("");
}
}
});
<div class="c_boxcnt">
<div class="chat_box">
<div class="chat_header">
<div class="l_aZn_5a">
<p>James Oduro </p>
<span class="closechat "><i class="fa fa-times tooltip" title="Close"></i></span> <span class="minimizechat "></span><span class="minimizechat "><i class="fa fa-camera tooltip" title="Add Photos"></i></span>
</div>
<div class="l_aZn_5a">
<div class="cupht"><img src="uploaded/1033761452673232.jpg" /></div>
</div>
</div>
<div class="chat_body">
<div class="msg_body_a">
<div class="msga">
<div class="b5d_wa">
<div>
<div class="dz_d5ae"><img src="uploaded/1033761452673232.jpg" height="30" width="30"/></div>
<div class="d_bzAe_4">
<span class="a_r5ia"><span>made my birthday a wonderful one. God richly bless you in </span></span>
</div>
</div>
</div>
</div>
<div class="mbox">
<form method="post" action="#">
<textarea class="textareaxmsg" placeholder="Type a message..." title="Type a message"></textarea>
</form>
</div>
</div>
</div>
</div>
</div>
This worked but it is a bad code practice:
Since we can set the vertical position of the scroll area , all I did was to increase the position to uncountable number.
if( $(this).parents(".msg_body_a").children(".msga").append(conTent)){
$(this).parents(".chat_body").children(".msg_body_a").scrollTop(1000 * 1000 * 5000 *2 * 1000 *90000); /* set uncountable number */
$(this).val("");
};
I am trying to get a safe position specification for my moveable div in several window solutions and sizes. I want to have one 0 position at the left side of the droppable area (#drop1). The jQuery-function position() is not enough for this task.It is understandable what I mean? I do there an alert with several position specifications and differences between, but I don't get an steady result for the position of my moveable div. jsFiddle
alert('e.pageY-this.offset().top:'+(e.pageY - $(this).offset().top)+"\n"
+'e.pageX-this.offset().left: '+(e.pageX - $(this).offset().left)+"\n"
+'e.pageX/e.pageY: '+e.pageX+'/'+e.pageY+"\n"
+'offset(left/top): '+$(this).offset().left+'/'+$(this).offset().top+"\n"
+'posLeft/pos.top: '+pos.left+'/'+pos.top+"\n"
+'draggable.position(left/top): '+ui.draggable.position().left+'/'+ui.draggable.position().top+"\n"
+'draggable.offset(left/top): '+ui.draggable.offset().left+'/'+ui.draggable.offset().top+"\n"
+'dropPositionX-dragItemOffsetX: '+dropPositionX+' - '+dragItemOffsetX+"\n"
+'innerWidth: '+window.innerWidth+"\n"
+'Main centered area width: '+$('#main').css('width')+'- bar left width: '+$('.col').css('width')+"\n"
+'position calculated: '+((window.outerWidth/2-parseInt($('#main').css('width'))/2+100)));
Html:
<div align="center" width="100%">
<div id="drag1" class="ui-widget-content" rel="a"><p>drag 1</p></div>
<div id="drag2" class="ui-widget-content" rel="b"><p>drag 2</p></div>
<div id="main">
<div class="col"> </div>
<div id="drop1" class="bg1">
<div id="drop-inner1" class="widget1"><p>AREA 1</p></div>
<div id="drop-inner2" class="widget1"><p>AREA 2</p></div>
</div>
<div class="col"> </div>
</div>
</div>
<div style="clear: both;"> </div>
I found a solution by myself.
THIS was what I am searching for:
var diffDragX = (ui.draggable.offset().left - $('#drop1').offset().left);
var diffDragY = (ui.draggable.offset().top - $('#drop1').offset().top);
I want to create a simple slider like the one I ve shown in the pic.. I have two divs wrapper 1 and wrapper2 separated by a margin of 20px,
I have a button in wrapper 1 clicking on which a new div should come down sliding which should come in front of wrapper 1 and 2,
The code that Ive used is
<div id="wrapper1" style="width:960px; height:200px;z-index:100;">
<a href="#" class="clickMe">
<div id="tab1">
</div>
</a>
<div id="slider" style="width:400px; height:100px; z-index:999;">
</div>
</div>
<div id="wrapper2" style="width:960px; height:200px; z-index:100;">
</div>
and the script looks like
$(document).ready(function()
{
$("#slider").css({"display":"none"});
$(".clickMe").click(function()
{
$("#slider").slideDown("slow");
}
);
});
With this code, what I get is the slider window comes sliding down by pushing wrapper2 downwards instead of coming in front.what could be the issue?
I've put a fiddle together.
Here is the relevant code:
HTML
<div id="wrapper1">
<div class="clickMeWrapper">
<a class="clickMe" id="tab1" href="#">Click Me!</a>
<div class="slider">
</div>
</div>
<div class="clickMeWrapper">
<a class="clickMe" id="tab1" href="#">Click Me!
</a>
<div class="slider">
</div>
</div>
</div>
<div id="wrapper2">
</div>
jQuery
$(document).ready(function() {
$(".slider").hide();
$(".clickMeWrapper").click(function(e) {
e.preventDefault();
e.stopImmediatePropagation();
$(this).children(".slider").slideToggle("slow");
});
});
If something's not clear, please let me know.
I think you should add position:absolute; to "slider", and set its position.
You have to put your slider outside the wrapper elements otherwise the parent child relationship overrides some formatting rules like z-index. position:absolute and other css attributes should be set by jQuery automatically.
You need an absolute position for z-index to work.