i don't need any calender, datepicker, or timepicker.. i just want to know...
Can somebody please tell me... how the divs come to appear when user clicks on some specific text fields...
see on this link..
http://pttimeselect.sourceforge.net/example/index.html
i dont' want to show calendar or time picker.. but may be some images with some details.. that is not a part of question.. i just want to show some div with "blabla" data...
Thank you
Oh.. i found it..
I got it.. in jquery i found a method of "offset();" that further give me its' left and top values..
.. Thank You
ALHAMDULILLAH
Well, the best way I can think of is to use JQuery and generate the div on the fly when your element is clicked.
The div should be absolutely positioned and set to display: none (if you want the slide down effect). This is a quick sample I made for showing the div:
$('.moreInfo').click(function(){
var data = "Whatever data you want to show in the div";
var div = $('<div />').text(data)
.css('display', 'none')
.css('position', 'absolute')
.css('top', $(this).outerHeight() + $(this).offset().top)
.css('left', $(this).position().left)
.css('width', '200px')
.css('height', '300px')
.css('border', '1px solid #000');
$(this).after(div);
div.slideDown(500);
});
(The CSS may as well be a separate CSS-rule and modified however you want, except for the 'top' and 'left' attributes)
This opens a new div for every click, so you probably want to check if the div already exists and then remove it.
The easiest way would be to define functions for the input field on focus and blur:
<input id="sampleInput" type="text" onfocus="showDiv()" onblur="hideDiv()" />
<div id="content" style="position:absolute;top:0;left:0;visible:false;">...</div>
EDIT: Here's some psuedocode to get you started
//This will give you the distance from the top of the page to the input box
inputTop = inputElement.offsetTop;
//This will give yout he height of the input element
inputHeight = inputElement.offsetHeight;
//Now set the top of the content div to be the sum of the offsets:
contentDiv.style.top = inputTop + inputHeight;
//Now show the content div
contentDiv.style.visible = "true";
Related
I am using bootstrap cards to display my content. I want every bootstrap card height to be equal. Everything else is fine but issue comes when I display discription as it is of variable length.
Sometimes it occupies two lines and sometimes three.
I want to fix description div height and cut down extra text from it.
Note Card are being displayed through loop
This is what I tried:
$('address').height(30);
var txt= $('address').text();
if(txt.length > 155)
$('address ').text(txt.substring(0,50) + '.....');
This is working perfectly fine for one card. But when there are multiple cards running in loop, same description text appears along every card due to this line: var txt= $('address').text();
How to make it work separately for each card?
Your current select is targetting all the address element. You need to filter out the elements based on if condition. You can use jquery filter function for this.
Then iterate over those objects and modify the text.
var $addressToChange= $('address').filter(function(){
return $(this).text().length > 155;
});
$addressToChange.each(function(){
$(this).text($(this).text()..substring(0,50) + '.....')
})
I am thankful to #Milind Anantwar for his answer as his answer gave me a clue. I little modify his answer and achieved my desired result by using this piece of code:
$('address').height(40);
$('address').each(function(i){
if ($(this).text().length > 40)
{
$(this).text($(this).text().substring(0,50) + '.....')
}
});
How to make a DOM div reappear with new parameters applied to it, like different color, different number of children elements; after ng-show =false hiding it from the page?
ng-show = true is one part, but how can i modify it before it reappears or while it is reappearing? Basically, that div contains
<div> ng-show="showdiv" ; ng-repeat="x in elements" </div>
and iam trying to make it reappear with a different set of elems from elements
Set a variable in your controller where you store a boolean value. Set the ng-show to that variable. Now if you set this variable to true, the element reappears.
JS:
$scope.showDiv = false;
HTML:
<div ng-show="showDiv"></div>
You can add specific class to div which will change appearance of div:
HTML:
<div id="test">sample</div>
JS:
$('#test').addClass(class);
you can also use toggleClass if you want revert it after another change.
It's not a angular but it's jquery. Your question isn't quite explained. Describe more details (html/js) for further help.
Hope this will help you.
I write page, which shows sellers of used items. There is many short info elements on the map with price, state of item and period of availability of seller. I want to reduce free space of info windows so more of them can fit the screen. I try new functionality in 6.5.0 of wicket-stuff gmap3 - "panels inside info windows", but no luck - picture shows result of css:
border : 1px solid black ;
margin : 0;
padding : 0;
How can i minimize free space of info winfo window and fit it to content?
P.S. It will be best if i can make clickable group of digits with pointer. But info window not clickable, so there is markers. Idea - user first make brood choice based on main properties displayed in info windows, then click his choice and complete info displayed somewhere else on the page.
P.P.S. Hmm, i have one more idea now - i don't need digit with state. I just can paint info in different colors(green = "like new", blue="used hard, but works", red = "garbage") :).
Quick and dirty
var infowindow = new google.maps.InfoWindow({
content: '<div id="iw_content">3434 4 18-9</div>'
});
google.maps.event.addListener(infowindow,'domready',function(){
var el = document.getElementById('iw_content');
//* Get and set a class for the main content containers container
el = el.parentNode.parentNode;
el.setAttribute('class','iw_content_container_container');
//* Get and set a class for the div containing the close window image
closeEl = (el.previousElementSibling)?el.previousElementSibling:el.previousSibling;
closeEl.setAttribute('class','closeInfoWindow');
//* Get and set a class for the div containing the close and main content
el = el.parentNode;
el.setAttribute('class','closeInfoWindowContainer');
//* Get and hide the troublesome background
el = (el.previousElementSibling)?el.previousElementSibling:el.previousSibling;
el.style.display = "none";
//* Get and hide the top image of the arrow
el = (el.previousElementSibling)?el.previousElementSibling:el.previousSibling;
el.style.display = 'none';
//* Get and hide the shadow (hiding commented out for now as not strictly requested)
el = el.parentNode.parentNode;
el = (el.previousElementSibling)?el.previousElementSibling.previousElementSibling:el.previousSibling.previousSibling;
//el.style.display = 'none';
});
That might work for you to put some hooks in the code which you can then address with css
#iw_content{background:#fff}
.iw_content_container_container{height:auto!important;text-align:center}
.closeInfoWindow {top:22px!important;right:22px!important}
.closeInfoWindowContainer{position:absolute;top:52px;height:auto!important}
You may want to mess about with the .closeInfoWindowContainer top value as this is dependant on the amount of text. Basically tested with just that one line of yours.
I tried actually removing widths and heights in the code itself (so adding/changing within the javascript) but Maps have an annoying habbit of putting them back in again depending on state and position of cursor when loading.
...
Info Windows are clickable. They are just a normal div element in the page and can be treated as such. I have made the various values in your example hyperlinks to show this.
Sorry it isn't wicketstuff but I thought I should still post a solution.
I found this jsfiddle online that does exactly what I've been looking for... the problem is is that it creates the visual using pure JS. I wanted to put that inside a div so I could control it... Like defining exact placement, margins, adding opacity, etc...
Here's the jsfiddle: http://jsfiddle.net/7jHPv/52/
Right now "I'm" placing the visual on the page through the JS code itself, wondering how I can "load it" inside that container div.
So, taking the example on the jsfiddle, instead of being at the position given by the code, make it follow the margins I attributed to the container div... by putting it inside the div.
I see this:
return {
path: path
};
Can I change the return there to "add it" to the container div? Or something...
Thanks!
instead of
var paper = new Raphael(100, 300, 0, 100, side);
make the definition
var paper = new Raphael("container", 100, side);
where container is the name of your div. From there you can control the div's location, margins/padding and whatever else
I have a page with a for layout where one half of the page is dynamic width an the other is fixed. This is achieved by floating the fixed width side to the right. It all displays fine but because the fixed width markup comes before the dynamic width markup the tab ordering gets thrown off.
See here: http://jsfiddle.net/BaMqG/
How can i overcome this without resorting to putting tabindex properties on the inputs?
You can use jQuery to dynamically set the tabindexes with a loop and counter variable. Check it out. http://jsfiddle.net/BaMqG/22/
$(document).ready(function() {
var i = 1;
$('.wrapper').each(function(){
$(this).children('.dynamic').children('input').each(function(){
$(this).attr("tabindex",i);
i++;
});
$(this).children('.fixed').children('input').each(function(){
$(this).attr("tabindex",i);
i++;
});
});
});
The initial value for i can be set to whatever tabindex number you want to start from.
I have managed to get the same looking form with no tab index to work by using tables.
See here: http://jsfiddle.net/ymSGM/
I would still be interested if it can be done any other way.