I have to create a popup like this:
And then, bind it to an html element and make it appear when hovering it.
I'm using bootstrap, and so far i've been trying this:
HTML:
<a data-toggle="uid-popover" class="od-icon info-icon clientreference-info-button cursor-pointer"></a>
Javascript:
var popoverTemplate = ['<div class="timePickerWrapper popover">',
'<div class="arrow"></div>',
'<div class="popover-content">',
'</div>',
'</div>'].join('');
var content = ['<div>TEST</div>', ].join('');
$('[data-toggle="uid-popover"]').popover({
content: content,
template: popoverTemplate,
placement: "up",
html: true
});
I would like to know if it's possible to locate the popup just in front of the hovering item, but i'm not able to do it, because the "placement" parameter only accepts "up,bottom,left,right" inputs.
If there is any other way to make popups easier with or without bootstrap, I would be really thankful to know.
Thanks.
You can set it manually like following. please create fiddle I could not insert link also could not create a snippet.
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<p>Click on button to see Popover</p>
<div style="width:200px; margin: 0 auto;">
pop
</div>
$(function () {
$('#example').popover();
$('#example').on("shown.bs.popover",function(e){
$(".arrow").hide();
var d = $(".popover")[0];
d.style.left = ((d.offsetLeft) - ($(".popover").width()/1.4)) + "px";
d.style.top = ((d.offsetTop) + ($(".popover").height()-15)) + "px";
})
});
Related
I create the variable for event link, as the user input the link, I want it to display as a hyperlink in HTML by using jquery. Since user could do a infinite input, therefore the output of the link will be on the next line.
var $event_link_selector = $('#event-link');
var event_link = $event_link_selector.val();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="event-link">Event Link:</label>
<textarea id="event-link"></textarea>
Ex: If the user enters www.example.com into the test area, I want the page to return me that link and be able to click on it. These are the jquery I currently trying but not working
//returns me the user input link as string instead of link
"<br> <a class='event-description'>"+ event.event_link + "</a>"
//returns none
"<br> <a class='event-description' href='" + event.event_link + "'></a>"
You didn't share your whole jQuery code... But it's already clear your quotes were misplaced!
$('#event-link').on('focusout',function(){
var event_link=$(this).val();
$(this).parent('.link-container').append('<a class="event-description" href="' + event_link + '">'+event_link+'</a>');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="link-container">
<label for="event-link">Event Link:</label>
<textarea id="event-link"></textarea>
</div>
I'm trying to dynamically create HTML cards in javascript that include a Materialize dropdown-trigger.
posts.forEach(function(element) {
....
message += '<a class="dropdown-trigger btn-flat" data-target="drop1">';
message += '<i class="material-icons">more_vert</i>';
message += '</a>';
document.getElementById("post" + index).innerHTML = message;
index++;
}, this);
M.AutoInit();
HTML menu content:
<ul id="drop1" class="dropdown-content">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
If I create the buttons not using the dynamic addition, everything works as expected. By dynamically adding them as shown above, the content of the menu has a height of 0:
...even though inspection shows it should have a height of 50px:
I've also tried:
Adding unique dropdown-content for each post (trigger1 opens drop1, trigger2 opens drop2, etc.)
Initializing each Trigger individually.
I couldn't reproduce the issue you are having but below solution may give an idea or may be helpful to solve the issue. Also, note that some assumptions are made in below code part.
var index = 1;
var posts = ["post1", "post2", "post3", "post4", "post5"];
posts.forEach(function(element) {
let post = document.createElement('div');
post.id = "post" + index;
document.body.appendChild(post);
// Remaining work..
let cloneDrop = document.getElementById("dropTemplate").cloneNode(true);
cloneDrop.style.visibility = "visible";
cloneDrop.id = "drop" + index;
document.getElementById("post" + index).appendChild(cloneDrop);
// Remaining work..
let message = '<a class="dropdown-trigger btn-flat" data-target="drop' + index + '">';
message += '<i class="material-icons">more_vert</i>';
message += '</a>';
document.getElementById("post" + index).innerHTML += message;
index++;
}, this);
M.AutoInit();
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<ul id="dropTemplate" style="visibility: hidden" href="#" class="dropdown-content">
<li>one</li>
<!--
Also, if <li/> element is being overridden by a stylesheet, following approach can be tried. (Of course, it is not so correct way)
<li style="width: 100px important; height: 50px !important">...</li>
-->
<li>two</li>
<li>three</li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
JSFiddle Live Example: https://jsfiddle.net/ErdSavasci/vs37au84/
I am trying to append a box to a list. This box should have a heading which identifies it, but I am having trouble figuring out how to increment each heading by 1.
Currently, the boxes are being generated by this code when a button is clicked.
function createBoxYes(i) {
var box = '<div class="panel-heading">Question 1</div>';
$("#yesColumn").append(box);
}
However, I am trying to increment the Question number based on the input, i. It should equal i + 1. My first thought was to put an id on the div, but if I used findElementById("question"), then it would select all of the boxes, and I want to simply have each box generated to remain unchanged.
Thanks for the help!
This may help you.
function createBoxYes(i) {
var box = '<div class="panel-heading">Question' + (i + 1) +'</div>';
$("#yesColumn").append(box);
}
Just put i+1 in there.
I hope this ll helps you:
var questions = 1;
function createBoxYes() {
var box = '<div class="panel-heading">Question ' + ++questions + '</div>';
$("#yesColumn").append(box);
}
$('#addBox').bind('click', createBoxYes);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" />
<div id="yesColumn" class="panel panel-default">
<div class="panel-heading">Question 1</div>
</div>
<button id="addBox" class="btn btn-info">Add</button>
For my app, I'm trying to add a Jquery Datepicker after a certain event (for this example, let's just say when the page loads).
I'm currently trying to do something like this:
var mealControl = new MealControl();
$(document).ready(function(){
mealControl.createMealForm();
}); //document.ready
function MealControl() {
this.createMealForm = function(){
var currentDate = new Date();
var prettyCurrentDate = currentDate.getFullYear() + '/' + (currentDate.getMonth() + 1) + '/' + currentDate.getDate();
var innerHtml = "<p>Creating meal item data input here</p>" +
"<div>Title:<input id=\"mealTitle\" type=\"text\" align=\"center\" width=\"50\" class=\"ui-input-text ui-body-c ui-corner-all ui-shadow-inset\" />" +
"<br></div>" +
"<div class=\"ui-input-datebox ui-shadow-inset ui-corner-all ui-body-c\">" +
"<div class=\"ui-input-datebox ui-shadow-inset ui-corner-all ui-body-c\">" +
"<input data-options=\"{'mode':'calbox','calHighPicked':false, 'calHighToday':true, 'calHighPicked': false}\" data-role=\"datebox\"id=\"datePicker\" value=\"Enter consumption date here\" type=\"text\" align=\"center\" class=\"ui-input-text ui-body-c\"/>" +
"<a href=\"#\" class=\"ui-input-clear ui-btn ui-btn-up-c ui-btn-icon-notext ui-btn-corner-all ui-shadow\" title=\"date picker\" data-theme=\"c\" style=\"vertical-align: middle; float: right; \">" +
"<span class=\"ui-btn-inner ui-btn-corner-all\" aria-hidden=\"true\">" +
"<span class=\"ui-btn-text\">date picker</span>" +
"<span class=\"ui-icon ui-icon-grid ui-icon-shadow\"></span></span></a>"
"</div>"
$("#contentDiv").html(innerHtml);
} //createMealForm
When I do it this way, the button that should bring up the date picker does not do anything. However, if I put all of those elements right into my
<div data-role="content" id="contentDiv" class="ui-content" role="main">
the button works just fine. I'm completely stumped by this behaviour and any help would be much appreciated.
Also, I've read in other places it should be as simple as
("#datePicker").datepicker();
but that doesn't work for me either (Uncaught TypeError: Object [object Object] has no method 'datepicker').
Thanks
The reason it isn't working for you is because the input field you're binding the datepicker isn't available on document ready.
You need to bind the date picker after you've added the markup to the DOM.
Check out this fiddle
Adding the datepicker after you've this line should work
$("#contentDiv").html(innerHtml);
$('#datePicker').datepicker();
jQuery built-in functions has no calendar function. So, You've to import a plugin. There's a lot of them:
http://www.tripwiremagazine.com/2011/10/jquery-calendar-date-pickers.html
But, perhaps the most used is the jQuery UI cause it has a lot more function:
http://jqueryui.com/
You could use this: http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/
for creating datepicker
all you need is the following:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script>
$(function() {
$( ".datepicker" ).datepicker();
});
</script>
and in the form :
<p>Date: <input type="text" class="datepicker"></p>
this will use the Jquery UI and create a datepicker for every input field with datepicker as class
i have a single div 100px X 300px. What's the easiest way in JavaScript so when I hover over the div i show an image and then when i leave the div the image disappears.
for starters i thought the following would get me started but i can't seem to remove the image properly
<script type="text/javascript">
function MouseOver_Event(elementId) {
var imgToCreate = document.createElement('img');
imgToCreate.setAttribute('id', 'imgHandle');
imgToCreate.setAttribute('src', elementId + '.png');
imgToCreate.setAttribute('onmouseout', 'MouseOut_Event('+elementId+')');
var targetDiv = document.getElementById(elementId);
targetDiv.appendChild(imgToCreate);
targetDiv.removeAttribute('onmouseover', 'MouseOver_Event');
}
function MouseOut_Event(elementId) {
var imgToRemove = document.getElementById('imgHandle');
var targetDiv = imgToRemove.parentNode();
if (imgToRemove != null)
targetDiv.removeChild(imgToRemove);
targetDiv.setAttribute('onmouseover', 'MouseOut_Event(' + elementId + ')');
}
</script>
</head>
<body>
<div id="div1" onmouseover="MouseOver_Event(this.id)"></div>
<div id="div2" onmouseover="MouseOver_Event(this.id)"></div>
<div id="div3" onmouseover="MouseOver_Event(this.id)"><img src="Div3.png" alt="test" onmouseout="MouseOut_Event(parentNode's id or something)" /></div>
</body>
You're attaching your MouseOut_Event to onmouseover instead of onmouseout. But you probably don't need to be messing with dynamic event creation anyway; just add onmouseout="MouseOut_Event(this.id)" to the three divs and that should do it.
Why don't you use CSS instead ?
For example:
#div1{background:none;}
#div1:hover{background:url('src/div1.png') no-repeat;}