I wrote a code to have a second div match the height of the first div. However, it doesn't work when refreshing the page. For example, if the first div has a height of 10000px, on refresh, the alerted height ranges from 5000px-8000px instead of 10000px. Keep in mind that the code below is just an example to illustrated the problem, and is not the original code. The original code retrieves data from mySQL.
<?php
include("ajaxLink.php");
?>
<style>
#totalWrap {
height: 10000px;
width: 25%;
display: inline-block;
border: 1px solid red;
}
#matchTotalWrap {
width: 25%;
display: inline-block;
border: 1px solid blue;
}
</style>
<div id = "totalWrap"></div>
<div id = "matchTotalWrap"></div>
<script>
$(function(){
var matchHeight = $("#totalWrap").height()+"px";
alert(matchHeight);
$('#matchTotalWrap').css("height",matchHeight);
});
</script>
PS: It works perfectly when you re-enter the link in the address bar.
Related
I have several HTML elements that I need to display a tooltip on hover. These are not conventional HTML elements and come from a generated script on the backend, which I do not have permissions to alter. What I want to know, from a front end perspective, is how I can display a tooltip without declaring this in the HTML.
I tried using Bootstrap tooltips, but you need to declare this in the HTML tag as a title, so it's not useful. So, as the example shows below, I need some text saying 'Action' to appear in a tooltip when you hover over the 'Action' element that contains 'should'. Same will be applied when you hover over the text 'approximate number of' contained in the 'Quantifier' element - the word 'Quantifier' should be displayed. Hope this makes sense.
<body>
One string that <Action>should</Action> work is
<Quantifier>approximate number of</Quantifier> other things.
<script>
$(document).ready(function(){
$("Action").hover(function(){
});
$("Quantifier").hover(function(){
});
});
</script>
<body>
So far non-conclusive, as I can only change CSS values and not tooltip text.
You can try updating the title property on those elements. One thing to note is that HTML tags will appear in lowercase when compiled.
$(document).ready(function() {
var style = document.createElement('style');
style.type = 'text/css';
$('head')[0].appendChild(style);
style.innerHTML =
`action, quantifier {
position: relative;
display: inline-block;
margin-top: 20px;
}
action[title]:hover:after, quantifier[title]:hover:after {
content: attr(title);
position: absolute;
top: -100%;
left: 0;
}
action[title]:hover:after {
color: red;
border: solid 1px black;
}
quantifier[title]:hover:after {
color: blue;
border: solid 1px black;
}`;
$('action')[0].title = 'Action';
$('quantifier')[0].title = 'Quantifier';
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
One string that <Action>should</Action> work is
<Quantifier>approximate number of</Quantifier> other things.
</body>
add a tooltip for an tag with JS/jQuery without change the html structure. You can modify the css based on requirement.
jQuery(function($){
//If you are able to add class then use $('.add_tooltip').hover
// use $('Quantifier, Action').hover
$('Quantifier, Action').hover(
function () {
//let text = $(this).html(); //this is for html content of hover element
let text = $(this).prop("tagName");
//Add the tag name of hover element to tooltip div
$(this).append('<div class = "tooltip">'+text+'</div>');
//display the tooltip with animation.
$(this).find('.tooltip').hide().fadeIn('slow');
},
//On hover out remove the tooltip.
function () {
$(this).find('.tooltip').remove();
}
);
});
Quantifier, Action{
cursor: pointer;
position:relative;
}
.tooltip{
display: inherit;
background: black;
margin: auto;
padding: 10px;
position: absolute;
z-index: 1000;
width: 200px;
height: 40px;
color: #fff;
top: 18px;
left:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
One string that <Action>should</Action> work is
<Quantifier>approximate number of</Quantifier> other things.
I have a menu containing onclick calls. Then my js script catches the data and sends it to a php script for processing and returns it back to my js script which is supposed to place the results into the defined document element. Simple enough, right.
For some reason though, if I set the background color in my css the results will not show. Here are the relevant parts of my code. Can someone point out to me if there is a flaw in my code; and if not, why does this behavior happen and is there a work around.
My css...
.decade { margin-left: 150px; padding: 20px; color: green; }
.slaby { position: fixed; left: 200px; bottom: 86px; top: 50px; right:50px; color: black; padding: 20px; background-color: #ddd; border: 2px solid grey; }
My html...
<div class='tln'>
<span class='point' onclick='mes(this)' go='a' >The 70's</span>
<span class='point' onclick='mes(this)' go='b' >The 80's</span>
</div>
<div id='decade' class='decade'>
<div id='slab' class='slaby'></div>
</div>
My js...
function mes(span) {
var clam = span.getAttribute('go'); var shot = 1;
$.ajax({ url:'', type:'POST',
data:{ page: clam, shoot: shot, },
success: function(snowy){
$('#slab').html(snowy);
$('#decade').html(snowy);}});}
In my js script I am placing the results in both 'slab' and 'decade' elements just for testing purposes. Now with my css the way that it is, div(decade) is showing the results, while div(slab) is still blank.
For some reason: if I remove the background color from the div(slab) The results show here; if I add a background color to the div(decade) the results still show here.
I'm looking for a way to display the results in div(slab); as well as, having css style div(slab)'s background color. Thank you all for any help and have a great day.
Some of the other comments pointed out that #slab is "inside" of #decade so when you are doing $('#decade).html() you are replacing/removing #slab.
Use
$('#decade').append()
instead or alternatively
$('#decade').prepend()
(SOLVED) why will jquery not put results in div with background color set.
I am not sure why the query contents were not being displayed, but changing the style for div(slab) with a z-index provided the results I was looking for.
I set the z-index for div(slab) to z-index: -1; and 'voila', works perfect.
.slaby { position: fixed; left: 200px; bottom: 86px; top: 50px; right:50px; color: black; padding: 20px; z-index: -1; background-color: #ddd; border: 2px solid grey; }
I have no idea why this works because no other element inside or outside of it has a z-index set.
Thank you all for your input and effort. I hope this solution helps somebody.
I am trying to change content in the div, when user typing in other div. Everything works fine: JSFiddle
But when I insert these divs inside another div (I insert these divs inside HTML-editor that is editable div) - it is not working at all.
How can it block this?
$(document).keyup(function() {
var add_title = $("#add_title").html();
$("#title").html(add_title);
});
* {
box-sizing: border-box;
}
.input {
display: inline-block;
min-width: 400px;
min-height: 40px;
padding: 10px;
border: 1px solid blue;
}
.title {
margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=title class=title>default</div>
<div id=add_title class=input contenteditable=true></div>
Try this.
$(document).on('keyup','.input',function () {
var add_title = $(this).html();
$( "#title" ).html(add_title);
});
It seems like you are adding dynamic elements to the page and for those elements it is not working. if that is the issue then you have to look into event delegation a bit more. The above code will hopefully fix your issue.
I have JavaScript that makes it so that when you click on a string of text it creates a div that slides down and expands an area bellow it to show more information. I want to be able to have a link on a different page of my website that when clicked takes you to the page with the string of text ALREADY clicked on and expanded. How would I do this?
JSFidldle: http://jsfiddle.net/hr07tn16/2/
JavaScript:
$('.moreInfo').on('click', function(){
var target = $(this).data('target');
$('.expandable').not('.' + target).slideUp(500, function(){
$('.' + target).slideDown(500, function(){
});
});
});
HTML
<div class="moreInfo" data-target="red">More Info</div>
<div class="moreInfo" data-target="green">More Info</div>
<div class="expandable red" style="display: none;">RED</div>
<div class="expandable green" style="display: none;">GREEN</div>
CSS:
.expandable {
width: 997px;
height: 300px;
}
.red {
color: white;
position: relative;
top: 380px;
border: 1px solid rgba(0,0,0,.1);
}
.green {
color: white;
position: relative;
top: 380px;
border: 1px solid rgba(0,0,0,.1);
}
You could add a hash to the link on your other page and, if the hash is present trigger the click. You could also use a flag to use the animation or not depending on whether is an automatic trigger or a manual one.
One thing you can try is redirecting to that page with a POST variable set indicating the element you would like expanded. Then on the page being directed to, have an onLoad() function which checks if the variable is set and then does what you want if it is.
onLoad()
I have two divs that have been coded using javascript so that the "lightpole" div will expand to match the height of the "LayoutColumn2" div. It seems to be working fine everywhere except on the checkout page. This page has some dynamic form elements that expand once one section is completed. The lightpole div does not expand to match the expanded divs that container forms, even though they are within the larger LayoutColumn2 div.
Site: https://store-e262c.mybigcommerce.com/checkout.php?tk=eceb5394b7c03ae4a283b2eabff8f9f6
If that doesnt work add something to the cart>proceed to checkout>Select I'm a new Customer, Continue button. The lightpole break is visible near the footer and very apparent if you continue through the checkout process. I can delete users if someone wanted to create a test user.
<!--make lightPole expand to height of tallest column-->
<script type="text/javascript">
$(window).load(function(){
var ht=($('#LayoutColumn2').height() > $('#LayoutColumn3').height()) ?
$('#LayoutColumn2').height() : $('#LayoutColumn3').height(); $('#lightPole').height(ht); }); </script>
The html is lengthy and changes depending on the stage in the checkout process but I can still post it if someone wants it.
CSS
#lightPole {
background:url(../images/lightPole8aSlice.png);
margin: 0 0 0 19.9px;
padding: 0;
position: absolute;
width: 15px;
z-index: -100;
display: inline-block;
float: left;
}
#LayoutColumn2{
float: left;
height: auto;
margin: 0;
padding: 0;
width: 641px;
}
.Content {
background: url("../images/contentMiddleBackground.png") repeat scroll 0 0 transparent;
float: left;
font-size: 0.95em;
margin: 0;
min-height: 266.5px;
padding: 0 5px 0 28px;
width: 609px;
}
It's nested pretty deeply and there are several other script blocks in there so maybe one of those is causing the problem...?
Your issue is imho to resize the div(#lighPole) when the other div(#LayoutColumn2) changes its height. This can be archived e.g. using the jquery resize plugin.
<script type="text/javascript" src="/content/jquery.ba-resize.min.js"></script>
<script type="text/javascript">
$(function() {
$('#LayoutColumn2').resize(function() {
var ht = Math.max($('#LayoutColumn2').height(), $('#LayoutColumn3').height());
$('#lightPole').height(ht);
}).resize();
});
</script>