I have started using jqMath for equations on my website and I need to be able to wrap these equations when their outer div has a fixed width.
<div id='math'>$$ x={-b±√{b^2-4ac}}/{2a} \text'A little bit of text that goes along with this.' $$</div>
CSS:
#math {
width: 100px;
}
At the moment jqMath will just continue the text and equations in a long line, I need to make sure that the 'math' div will be a certain width and there will be no scrolling within it.
Any help would be greatly appreciated.
If you want to wrap text, then you can try like this..
<div id="math">
$$x={-b±√{b^2-4ac}}/{2a}$$
<br />
$$\text' A little bit of text that goes along with this.'$$
</div>
or simply do this
<div id="math">
$$x={-b±√{b^2-4ac}}/{2a}$$
<br />
A little bit of text that goes along with this.
</div>
Related
I'm trying to build a Notion-like editor in Svelte, I've made some good progress, but I'm now scratching my head trying to figure out why exactly i get spaces between span elements.
I'm dividing the text in spans based on their formatting, here's an example of an output:
<div contenteditable="true">
<p>
<span contenteditable="true" id="a1" data-index="0">some text</span> //normal text
<span contenteditable="true" id="a2" class="bold" data-index="0">some other text</span> //bold text
</p>
</div>
In between them a #textnode with a little bit of space gets created and I can't figure out how to avoid it. I've tried multiple CSS options, but no matter the CSS properties, these spaces persists. My understanding is that these #textnodes are on the DOM itself.
Here's the code responsible for this output. The $fragments array is modified through keydown events and binds to the HTML of the span element, synchronizing the changes. The default behaviour of a character insertion is prevented through e.preventDefault().
{#each $fragments[$selectedFragment].children[childIndex].text as fragment, i}
{#if fragment.tag == "span"}
<span
contenteditable="true"
id={fragment.id}
class="edit-row"
data-index={i}
class:bold={fragment?.formattingOptions?.bold}
class:italic={fragment?.formattingOptions?.italic}
>{fragment.text}</span>
{/if}
{/each}
I've also tried putting the code in a single line to avoid generating spaces somehow, but no changes:
<p id={$fragments[$selectedFragment].children[childIndex].id} class="{$fragments[$selectedFragment].children[childIndex].format} edit" data-index={childIndex} bind:this={element}>{#key $justKey}{#each $fragments[$selectedFragment].children[childIndex].text as fragment, i}{#if fragment.tag == "span"}<span contenteditable="true" id={fragment.id} class="edit-row" data-index={i} class:bold={fragment?.formattingOptions?.bold} class:italic={fragment?.formattingOptions?.italic}>{fragment.text}</span>{/if}{/each}{/key}</p>
Here's the demo: https://epub-theta.vercel.app/fragments
If you need any further details, please let me know.
Thank you for your help.
UPDATE: adding elements through browser's inspector does not generate these spaces, so it has something to do with how they get inserted by Svelte, or some space/line break somewhere somehow. Still searching.
UPDATE: definitely an issue with how Svelte renders the HTML, there is whitespace between elements by default and this is the outcome. No clear solution in sight, only some hacky workarounds that end up breaking other code.
either place the span tags next to each other on the same line or comment out the space.
<div contenteditable="true">
<p>
<span contenteditable="true" id="a1" data-index="0">some text</span><!--
--><span contenteditable="true" id="a2" class="bold" data-index="0">some other text</span>
</p>
</div>
This problem is related to the ongoing issue of whitespace handling in Svelte. There are solutions for SSR pages, but since in my case the HTML is user-generated I couldn't find a non-disruptive way to fix it.
For now I'll use this workaround which leaves the impression that these small spaces are not there:
span {
margin: -0.8px;
}
Is it possible to remove white space at the end of text with CSS (or optionally with JS)? I've tried all kinds of display property, but none of them seem to work. I would need to dynamically insert a blink-div at the end of multi line sentence. Currently it's is being added outside of phrase-div that contains sample text (which, as a div, is rectangular with white space I don't need). HTML structure looks like this:
<div id="writr-div">
<div id="phrase-div"></div>
<div id="blink-div"></div>
</div>
Please check out the both images:
Original:
Desired effect (border and background are for preview purpose):
EDIT:
Okay, I may haven't made myself clear enough. This is what I want (that's not an absolute position, I need it to be at the end of the sentce, no matter how long it is):
Thanks,
Luca
Simply use span:
#writr-div {
width:140px;
border:1px solid;
}
#blink-div {
border:1px solid red;
}
<div id="writr-div">
<span id="phrase-div">Some text here and there</span>
<span id="blink-div"> another text</span>
</div>
I am new to front-end development. I was trying to code an annotation tool. A sample screen is shown on the image below. After the user select a sentence, an annotation box appears on the right side bar at the same horizontal position as the highlighted sentence. Any ideas about how I can achieve that effect?
Here is my html structure. I used the framework of Zurb Foundation:
<section id="main">
<div class="row">
<div class="small-8 large-8 columns"id="rawdata">
<p> <span class="sentence">2:22 So, last time I was here, I don't know if I told you this, but, um, we kind of did a "I like, I wish" activity on paper, about things that you like about studio, and things that you wish would change.</span><span class="sentence"> Um, do you want to share any of those thoughts now, so maybe we can talk about them? [name], I have yours if you want to look at it again.</span></p>
<p><span class="sentence">2:47 I forgot to add something.</span></p>
<p><span class="sentence">2:54 Well, I don't know, in terms of what I dislike about studio.</span></p>
<p><span class="sentence">2:57 So, some people wrote in theirs that, um, they dislike how cluttered it gets.</span></p>
<p><span class="sentence">5:09 I don't get bothered.</span>< <span class="sentence">I like the draftiness, I'm a little...</span><span class="sentence"> I'm one of the ones that opens the windows, and like—</span></p>
</div>
<div class="small-4 large-4 columns" id="annotations"><p></p>
</div>
</div>
</section>
JS for selecting sentence and adding annotations:
<script>
$('.sentence').click(function() {
$(this).toggleClass('sentenceStyle');
var y = $(this).offset().top;
var para = document.createElement("p");
$("#annotations").append(para);
para.innerHTML="this is an annotation";
para.css("position",'absolute');
para.style.top = y;
});
</script>
And here it is the fiddle: http://jsfiddle.net/yujuns/HDe6v/3/
There are some things that you want to change in your code.
First what you want is to get the offset of the selection. That can only happen if you put an html tag around the selection and then get its offset. You can then place an absolute positioned message box by setting its left and top offset to the offset you got from html element.
In the following fiddle, I have shown a basic implementation to give you the basic idea. Hope it helps.
Fiddle
EDIT:
Try this fiddle update.(In response to author's question). I have added comments to lines of code that I added to js. I also added position: relative to css for annotations
Updated Fiddle
I'm having a problem where I seem to be unable to get some divs to line up nicely. It doesn't really matter whether its in an accordion (like it is) or not. The accordion doesn't make a difference. Here's what it does now:
I think it's obvious that i'd like them to be vertically aligned together, at the top (as some are longer than others) If you could out, then that'd be great.
I tried to make a fiddle of it but failed miserably, so if you want to see it in action, you can find it at http://thephotoshopwirral.com/covers.php
If you need any more info, just ask. I'll do my best to help you.
You have <br> tags between your labels. Remove them.
<label><br><label>
You're not closing the label elements. I suggest validating your HTML.
Also you can't put div elements within label elements.. I suggest restructuring.
Instead of closing <label> tags, you're opening new ones:
<label><div class="phoneitem">
<img src="http://www.thephotoshopwirral.com/image/phones/bold.png" width="200" height="250" alt=""/>
<input type="radio" name="phones" value="1" id="phones_">
Blackberry Bold
</div><label> <!-- THIS LINE -->
Replace <label> in the specified line to </label>.
I realize I'm still pretty new here, but I have a static image (Google Map but not using Google API yet) in which I have created hotspots which will pull up location data that lives in a table to the left of the map. When a hotspot is clicked on, however, the page scrolls down so that the top of the map (the image map) is at the top of the screen even though the information is directly beside the map.
I am assuming this is because the anchor is seeking to load at the top of the screen. This would be okay except that my header is now pushed out of the screen. Is there a way for the page to not "move" when the hotspot is clicked?
The page can be seen here: http://www.mydillonsupply.com/default.aspx?page=customer&file=customer/disupp/customerpages/locations_page.htm
Instead of using the default browser behavior (for anchor tags) just block it, and scroll the box yourself. I can see you are already using jQuery. So something like this ought to do the trick.
$('area').bind('click', function(e) {
e.preventDefault();
// the div in question has nothing uniquely identifiable as it is now,
// assign it a unqie class or id so you can select it
var findAnchor=this.href.split('#')[1];
$('#the_div').scrollTop($('a[name="' + findAnchor+'"]').next().position().top);
});
It's kinda hard to test in the context of that page, but if you set up a fiddle with just that part of it I am sure this could be made to work right pretty easily.
(edit) - OP set up a fiddle with the problem, updated version here:
http://jsfiddle.net/H3Mz6/9/
The code above has been updated to reflect what actually works. I also added the id "the_div" to the div surrounding the table of locations. Here's how it works:
1) get the part of the href after the # - the browser may add the full url.
2) find it, then get the next() element, because the invisible anchor tags will report that they have no location information
3) then get the position().top value which is the postion of that element relative to it's container
4) then scrollTop(..) to it
Contrary to #colinross's suggestion, there's nothing that's either non-extensible nor inflexible about imagemaps. Quite the opposite, they are the only way you can have irregularly shaped hotspots without going to a heck of a lot of trouble, and that gives you a lot of power. All you need to do to make them do whatever you want is bind your own mouseover and/or click events to the areas, and call e.preventDefault(). It's all yours from there.
Yes, I like image maps, and I also wrote a plugin that does a heck of a lot with them. So I am fairly biased. But I am surprised by the trouble people go to in order to avoid them (like absolutely positioning anchor links, complex css, and so on) when they're dead simple, easy to use, work with every browser under the sun, and are far more powerful than positioning all your hotspots by hand. (And without an imagemap, or some crazy logic to figure out where the mouse is on your own, you're limited to rectangular areas anyway!).
The jump is happening because you are using an image map that is processing a click to the location #DillonLocationsMap.
It is the same result as having an in-page anchor like <a name="over_here" /> and a link elsewhere of Go over here.
I would suggest you don't use an image map to be honest and they are not very extensible nor configurable.
give the fish answer
Move the actual <map> element up, to for instance before the table#MainTable element. It will still technically jump, but your header should still be in view.
p.s. Tables for page-layout makes pandas cry ;(
When you click on the link, your <a name="Nashville"></a> tag relating to said city end up scrolling to the top of your <!-- table containing locations -->.
Subsequently, this will work the exact same way as with a "Top" link where you place an <a name="TOP"></a> at the top of your page and then a Back to top at the bottom of your page. It will try to put the <a name="Nashville"> as close to the top of the viewport as possible (example: http://mix26.com/demo/local_scroll/index.html).
You could try something like this (found here):
<html>
<head>
<title>Document Title</title>
<script type="text/javascript" language="javaScript">
<!--
function go_anchor(n){
document.getElementById("div1").scrollTop = document.getElementById(n).offsetTop
}
// -->
</script>
</head>
<body>
To anchor 1<br />
To anchor 2<br />
To anchor 3<br />
To anchor 4<br />
<div id="div1" style="position:absolute; left:30; top:100; width:330; height:200; clip:rect(0,330,200,0); overflow:auto; padding:5;border:2px solid black">
<p>To anchor 1</p>
<p>Dummy Text 2</p>
<p>Dummy Text 3</p>
<p>Dummy Text 4</p>
<p>Dummy Text 5</p>
<p>Dummy Text 6</p>
<p>Dummy Text 7</p>
<p><span id="sp1">Anchor 1</span></p>
<p>Dummy Text 9</p>
<p>Dummy Text 10</p>
<p>Dummy Text 11</p>
<p>Dummy Text 12</p>
<br/><br/><br/><br/><br/>
<span id="sp2">Anchor 2</span>
<br/><br/><br/><br/><br/>
<span id="sp3">Anchor 3</span>
<br/><br/><br/><br/><br/>
<span id="sp4">Anchor 4</span>
<br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/>
The End
</div>
</body>
</html>