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>.
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;
}
I am using Angular 1.4.7 and need to do the following
<div ng-if="varIsTrue">
<div ng-if="!(varIsTrue)" my-custom-directive>
A lot of content
</div>
So basically, if the div is set only the proper div shows up. I tried do a few variations of this with ng-if and ng-show but I believe because how the browser renders the dom it is messing it up with the multiple divs, but that is the concept I am going for. Does anyone know how I can accomplish this?
You cannot do this you should have 2 closing tags
<div ng-if="varIsTrue">
</div>
<div ng-if="!(varIsTrue)" my-custom-directive>
A lot of content
</div>
or you will have to switch in my-custom-directive
first of all i'm not sure if i'm in the right topic for this if i'm not, please tell me but anyway, i have this code
<audio id="radioplayer" src="http://habbohol.radioca.st/;" autoplay="autoplay" ></audio>
<div id="play"></div>
<div id="stop"></div>
<div id="volup"></div>
<div id="voldown"></div>
It's for my site and i'm trying to get them to work, but when its in a div the buttons never play/stop/go up/down but if it's in a image or word for example it plays just fine, the odd thing it was working earlier in a div with the exact same code but with different div codes. It would be really appreciated if you could help, I believe this is Javascript but i'm not paralytically sure tbh
I listened the music but your divs are empty if you want to see your link you need put a string into you div like: <div>Button</div>
I think you forgot to put the semicolon after what's in the onclick quotations.
Try this (assuming the functions in themselves work):
<div id="play"></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 have this code : http://jsfiddle.net/Qchmqs/BSKrG/
<div class="step"><-- this is darned wrong
<div id="step2"><a>Darn</a></div>
<div id="step2"><a>Darn</a></div>
<div id="step2"><a>Darn</a></div>
</div>
<div class="step"><-- this works fine
<div id="step2"><a>Darn</a>
<a>Darn</a>
<a>Darn</a></div>
</div>
The first block is three links inside three separate divs inside a surrounding div
The bottom block has the links inside one parent div
I am trying to change the background of an active link, but it won't turn off in the upper block.
The script works well with the bottom links but not working as expected with the upper ones
PS : The active class should be toggled only from the Links i have a lot of other scripts in the page that uses the .active links from this list.
For starters, do what JamesJohnson said and remove the multiple IDs. They can only cause you problems down the road.
In the upper links, the a tags aren't siblings because you put each one in its own div. So you need to do this to remove classes from the other as:
$(this).parent().siblings('div').children('a').removeClass('active');
http://jsfiddle.net/mblase75/BSKrG/1/
Unfortunately, that breaks the functionality on the lower links. You can achieve success in both places by adding andSelf to the parent siblings:
$(this).parent().siblings('div').andSelf().children('a').removeClass('active');
http://jsfiddle.net/mblase75/BSKrG/2/
It's not working on the upper ones because you're assigning the same id to the divs. You should probably use the class attribute instead:
<div class="step2"><a>Damn</a></div>
<div class="step2"><a>Damn</a></div>
<div class="step2"><a>Damn</a></div>
After making the above changes, you should be able to do this:
$(".step2 a").text("Hello World!");
maybe this:
<div class="step">
<div id="step2"><a>Damn</a>
<a>Damn</a>
<a>Damn</a></div>
</div>
<div class="step">
<div id="step2"><a>Damn</a>
<a>Damn</a>
<a>Damn</a></div>
</div>
Using radio inputs you can create this effect without any JS at all, which degrades gracefully from its intended appearance (a red backgrounded "damn") to damn with radios next to it (sending the same information).
ironically, this example at JSfiddle: http://jsfiddle.net/YvQdj/
My memory is a bit fuzzy, but I'm pretty sure this doesn't work in older versions of IE without some finagling.