Radio Buttons not working when in a div - javascript

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>

Related

Angular switch Outer Div based on boolean

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

Why does the page jump up after redirection?

I stuck with a problem I can not solve. You may help me.
I have different information pages and at the end is the following link:
"You may find more pictures in our GALLERY"
It jumps to the gallery page and right section, but if all pictures are loaded, it jumps to top. I would like to avoid this jump up!
A part of the gallery php:
<div class="products-section">
<div id="apco">Apartment Concept</div>
<div class="products-grids">
<div class="col-md-4 products-grid">
<div class="gallery">
<a class="mask" href="../data/pic/22.jpg"><img src="../data/pic/22.jpg" class="img-responsive zoom-img" alt="/" title="Apartment"></a>
</div>
</div>
…
I also use jQuery because of design.
Please help me and clarify the problem.
I am beginner-intermediate HTML-PHP user and mostly work from templates.
Thank you!
I have the habit to use an anchor-tag to refer to when I want this kind of navigation. You can even nest an h1 or something else in it.
i.e.
a(id="apco")
h1 someText
Never failed me, I think some teacher hammered it in me a long time ago.
Hopefully it works out for you!
Delete #apco on the tag.
So,
"You may find more pictures in our GALLERY"

Can't vertically align divs

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>.

nav going below content on browser resize

I have a strange problem I can't figure out. I'm developing some navigation (that is responsive) independent from the rest of my site, and all is going well, except for one thing. If you load the page at a normal desktop size, the navigation is correctly above the placeholder image. But if you resize the browser window skinnier to where it switches to tablet size, and then resize it wider again, the navigation goes below the placeholder image.
Maybe it's something simple or maybe it's not. I can't figure it out.
My html structure is
<body>
<div id="page">
<div id="wrapper">
<nav></nav>
<section id="content"></section>
</div>
</div>
</body>
So I'm not sure how the content section is getting above the nav, but if you inspect the code and look at the html after doing the resize I describe above, the code becomes
<body>
<div id="page">
<div id="wrapper">
<section id="content"></section>
<nav></nav>
</div>
</div>
</body>
I'm not sure if it's the javascript I'm using or what the deal is that is juggling that and not resetting it. Surely it's not a missing CSS declaration...
EDIT: Resolved! Thanks Chris!
Looking at the code beginning on line #2619, the destroy function expects there to be an element #header, which doesn't exist. Add the element #header as the first element within your #wrapper and the issue will resolve. I'm assuming this isn't your JavaScript, so I wouldn't recommending changing it; instead, adjust your markup to give it what it expects.
Try changing the navigation.js line
a.elt.insertAfter("#content");
to
a.elt.insertAfter("#header");

How do I target an <a> inside a <div>?

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.

Categories