Posts by gentlemedia

Have you tried the new reCaptcha from Google yet?
https://www.google.com/recaptcha/intro/index.html

That CSS should center the navigation, so there's a conflict with some other rules you've set. If I see the CSS selectors in this bit here and if lots of styles in your stylesheet are like this, it's more likely that you suffer from CSS specificity. Anyway, we really need to see more (HTML & CSS), but prefereably a link to the website.

My bad... I totally didn't noticed the screenshot, but more details we're needed anyway, so half my bad :)

I flagged the two post for moderation to remove the screenshots.

What text? What website? What image? What background? Is the page online somewhere? Also not really sure what you want exactly.
We need to see at least also the HTML and you have to point out which elements you're talking about.

I can't check easily in IE9, but it has probably to do with the display: inline you've set on .navigationlink ul. I see you did that to center the menu items (incl. the span) vertically, but I guess you will have to find another way to do this. Paddings and margins on inline elements will only push elements horizontally away.... well, at least that should be the default behavior.

You're right, Airshow! I followed your advice and I got it solved, but I feel kind of stupid now :)

I add/remove a class 'active' on a 'li' so that I had a hook to trigger the CSS animations/transitions for the news items, but this classname is also used for the active song (the song that is playing) in the soundcloudplayers' playlist which is an unordered list with a li.active too.

So I had to be more specific with my selector when removing the 'active' class, so now I have it like this:

$('.news-grid').find('li.active').removeClass()

... and problem is solved! Both Airshow and Taywin thank you for your time and help. Much appreciated!

The mixcloud player is in an iframe, but the soundcloud player not. The soundcloud player data (audio, track info, artwork, etc.) comes from the track URL with json. I switch the content (the players) of section#main-player with jQuery .load(). The code of the players (mixcloud iframe and soundcloud URL) are in a HTML snippet that gets loaded into section#main-player. This al works as intended and I can navigate to other pages of the site and audio keeps on playing. Coming back to the 'news' page I still have control over the play/pause button of the soundcloud player, but once I open/close artist info it start to become a mistery :)

I stumbled on this today... https://ind.ie/pulse/ Perhaps it's something you can use for your file repository.

Thanks Taywin! I did some googeling this afternoon about that ($.browser.msie) and found a thread on Stackoverflow stating it is not compatible with jQuery 1.9.0. (which I load) and suggesting to replace that bit with (navigator.userAgent.match(/msie [6]/i)) which I did and it doesn't throw in an error like this, but it didn't solve the issue either :(

So... I'm still looking for a good fix!

With free hostings I can assure you will have limitations such as no PHP/MySQL installed or conflicting scripts from their ads that are scattered around your website. Better to spend a few bucks per month IMO. Good and reliable hosting doesn't cost much these days.

Well... unfortunately that fix works only if a track is playing and not when a set is playing half way. The set starts playing again with the first track (obviously). Bummer!

I have a (temporarely) fix for the second issue. After closing the artist info and I click on the 'play track' or 'play set' link of the song/set that is playing, I have control again over the pause/play button, so I do this step now dynamically with jQuery, but if there's a better solution or if someone can track down the cause of the issue, I'm all ears. I commented my 'fix' out in scripts.news.js for now and I'll leave the thread open for a bit. Thanks!

I have hard coded li.clone-container and button.close-details, but the issue of not stopping/pausing the soundcloud player still persist once I've closed .clone-container.

Thanks for looking at this, @Airshow! I could indeed hard code cc, it's just that I'm not such a fan of hard coded empty tags in the markup, but I will follow your suggestions and see if this will make a difference. Thanks!

Seriously? But that bit is somewhere in the beginning of sc-player.js and all the lines of code after that seems to run just fine (except for my issue then :) )

Yeah, I saw that in the console, but I believe it's not related to the issue. It is the Flash fallback for IE. It's browsersniffing with jQuery which is deprecated, so therefore the error I guess.

@Taywin, pointed me in the right direction, so I have resolved issue 2. I remove the siblings of the closing button (object) before detaching the clone-container.

        $cd.click(function(e) {

            $('li.active').removeClass('active').siblings().removeClass('hide');
            $(this).siblings().remove();
            $cc.detach();
            $sd.show();

        });

Now is only left the first issue (not pausing souncloud player after opening and closing artist info).

Thanks for your reply, Taywin! I will try that too. It is the .empty() that is conflicting somehow.

Apologies for such a vage title, but I seriously don't know where the two issues I have are related to. My JavaScript/jQuery skill is on a noob level, so bare with me please :)

I'm working on a AJAX/HTML5 History website which is a pet project of mine. It will be a music site where I use the mixcloud player as a widget (unfortunately) and a custom Soundcloud player which runs on the Soundcloud API.

The page is here: http://gentle.media/mixture/news
You can login with:
username: dani
password: web

On the 'News' page, that you should see now, I have 5 soundcloud items and clicking on 'play track' or 'play set' will change the default mixcloud player at the bottom to a soundcloud player and it starts playing (if autoplay is supported by the browser/device). Clicking on another track/set will change again and starts playing that track/set. So far so good! But.. if a user clicks on an 'info' link to open the artist info and closing it again by clicking on the little cross, I lost control over the player. I can't pause/stop the song anymore untill I click on a 'play track' link again.

The second issue is also on the 'News' page. The artist info is hidden inline (display: none) and by clicking on a 'info' link I create dynamically a list-item (.clone-container) at the end where I load a cloned version of the artist info content. This works fine, but only twice. …

As mentioned by @JorgeM... it really depends what kind of content you put in the slides and what purpose it should fulfill. Here's a great read about sliders: http://conversionxl.com/dont-use-automatic-image-sliders-or-carousels-ignore-the-fad/

A semicolon is only necessary if there will be another declaration after the other. If there is only one declaration, or if it's the last declaration in a CSS block, then you can leave the semicolon out if you want.

Indeed a forward slash (or trailing slash), of course! @stacy_2 it has more to do with valid XML then HTML. XHTML (X stands for XML) disappeard slowly in favor of HTML5, so we don't need to be so strict anymore with the way we markup our pages.

If you use a (X)HTML strict doctype then you will have to use a closing backslash, but with HTML5 doctype for example you can use the second as well.

If you don't have/want yet a webserver (for whatever reason), you can use Dropbox as a server to show your static page(s) and its assets and thus code to us.

http://www.creativepro.com/article/how-to-use-dropbox-a-web-server-3-easy-steps

Have to agree with @diafol. You have to think of more situations when there is not enough space for a horizontal family tree.

And although a dl is better for semantics, but with the recommended structure of it together with CSS alone, it is not doable to get it the way you want... well as far as I can tell up untill now :)

I figured out how to do this. I need to point the DNS of the other extensions to the hosting of the .com domain. Or something like that... I will ask the hosting provider for assistance :)

Hi peeps,

Not sure if this is the right forum to ask, but I've been asked to look into a situation for a client. They have a .com domain for their website and they registered also their name as .nl, .eu, .be and a couple more. I know how to redirect these domains to their .com domain, but a competitor of them have also a lot of extension of their name, but they don't redirect (I guess) because the extension stays the same. It looks like they load exact copies of their website on these domains. I can't believe they host their website on all these domains independantly... that would be a maintanance hell I asume and perhaps also not good for SEO.

So how would they have done such thing?

Cheers,
Ralph

I'm doing this in between things for you, so have a bit patient.
I have the HTML mark-up in place and will do the CSS, but it is more challenging then I thought in the first place. :)

http://cssdeck.com/labs/b48uyhyo

Using a definition list would be in my opinion sematically more correct then using an unordered list (ul).

Well... I can use a little challenge, so I'll see if I can pull it off. My goal is to use no fixed widths or heights. Content should dictate these. Also I might use a nested definition list (dl) for this.

No sorry... it's been ages for me since I have used DW and perhaps this thread is better off in the PHP forum.

It's not really clear to me what you exactly want, but my guess is you want to open an image or a video not on a seperate page, but in some kind of a modal/pop-up window. Am I right?

That's just how it works I'm afraid. Hover is not a gesture for touch screen devices, so it will become a 'click'.

There is also unfortunately not a 100% reliable way of detecting if a device is a touch or a non-touch device. Especislly with the fast rise of PC's that can be used with a traditional mouse, but also can de used as touchscreen device.

I've used in the past Modernizr to detect if the device is touch and then I would create a fallback solution and left out the hover effect. That doesn't help much anymore these days, so it's important to not hide critical content behind a hover effect. Mu advice is to use it to enhance the user experience on non-touch devices. but so that it doesn't interfere in a bad way the user experience on touch screens.

The trick is not to put text ontop of it :) If you want to use these patterns, then use a solid background color for your text areas.

You mean as text on the page in DW design view and/or live view, or just in the browser on your local machine? You will need to have a server environment on your local machine installed in order to execute PHP files. Look into WAMP for Windows or MAMP for Mac.

Optimzing your layout with CSS media querries to adapt for different screen sizes/resolutions is the way to go, but if you're HTML is created following best practices, then it shouldn't be that more work.

If you give the tabel a width that's higher then the 1700px of the div, you will get a scrollbar.

Here's your code with a table width of 3000px (I left the PHP stuff out):
http://cssdeck.com/labs/collab/lpmbiboz

You will need to wrap "HALLO" in an element (paragraph or so) and give that element a width in order to force a scrollbar. You probably also need to make that div wider then 15px... It's too narrow for a scrollbar anyway and you might need more content

Example:

<div style="width: 150px; overflow-x: scroll;"> /* 'overflow-x: auto' might be better */
    <p style="width: 3000px">The point of this page is to test whether today's browsers will download stylesheets that are referenced with media queries that would not apply on that browser or device.</p>
</div>

Hello
I'm Ralph and I'm a web designer which knows his way around HTML and CSS pretty good, but when it comes to real scripting languages then I could use all the help that I can get. I know how to write simple functions with jQuery and can get any jQuery plugin up and running, but this is most of the time because of the good documentation that is in place. Google helps me out a lot with finding the answers to my questions or coding issues, but sometimes I need them quick and easy, so therefore I'm in here :)

Cheers!

There are specific CSS media queries to handle these situations.

@media all and (orientation:landscape) {

    /* landscape styles in here */

}


@media all and (orientation:potrait) {

    /* portrait styles in here */

}

That anchor trick will work with a custom button, but not with the browser back button. I would look into infinite scroll together with HTML5 History api. There's a payed script that does this perfectly.
http://infiniteajaxscroll.com/examples/history.html