Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: include header php and html head

To give you an example what should only be in header.php if you want to include your menu/navigation on all your pages.

<nav role="navigation">
    <a href="home.php"><img src="img/logo.svg" alt="logo" /></a>
    <ul>
        <li><a href="home.php">home</a></li>
        <li><a href="portfolio.php">portfolio</a></li>
        <li><a href="services.php">services</a></li>
        <li><a href="contact.php">contact</a></li>
    </ul>
</nav>

You see? no html, no head and no body tags... just the mark-up for your menu.

This can then be included into your header for example like this:

<!doctype html>
<html>

<head>

<!-- All your meta data & stylesheets in here -->

</head>

<body>

    <header>

        <?php include 'header.php';?>

    </header>

    <main role="main">

        <!-- main content -->

    </main>

    <footer>

        <!-- footer content -->

    </footer>

</body>

</html>
Web Development html-css php
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: Image Tag with overlapping images for an image gallery

Here's the full code of that demo. Apologies for the unreadability. I did indent the code, but for some reason it doesn't show up fully indented.

<!doctype html>
<html>

<head>

<style>

    .gallery {
      position: relative;
      margin: 200px;
    }

    .gallery img {
      position: absolute;
      z-index: 0;
    }

    .gallery img:nth-child(1) {
      left: -25px;
      transform: rotate(-7deg)
    }

    .gallery img:nth-child(3) {
      left: 25px;
      transform: rotate(7deg)  
    }

    .gallery img.active {
      z-index: 10;
    }

</style>

</head>

<body>

    <div class="gallery">
        <img src="http://placehold.it/200x250/3ebecc/000000&text=image+1">
        <img src="http://placehold.it/200x250/4eb7a3/000000&text=image+2">
        <img src="http://placehold.it/200x250/c6b654/000000&text=image+3">

    </div>

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        $(function() {
            $('img').mouseenter(function() {
                $(this).addClass('active').siblings().removeClass('active')
            });
        });
    </script>

</body>

</html>
UI / UX Design html-css web-design
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: CSS-Masks Argghh

It should be -webkit-mask-image.

UI / UX Design web-design
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: Jquery gallery

I explained and showed you already how.

Web Development javascript javascript-jquery
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: Image Tag with overlapping images for an image gallery

With jQuery you can do something like this:

$(function() {
  $('img').mouseenter(function() {
    $(this).addClass('active').siblings().removeClass('active')
  });
});

The .active class has the higher z-index in your CSS.

Little demo: http://cssdeck.com/labs/full/jwprgxso

UI / UX Design html-css web-design
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: Image Tag with overlapping images for an image gallery

When do you want the active (hovered) image stay on top? I mean if you take of the cursor of the image, it will go back to it's original state and that's how hover works. The :active pseudo class can't help you with this either. You can't do this with CSS alone, you'll need JavaScript to trigger an event that keeps the image on top once you hovered it and go back once you hovered another image in the stack.
Actually, there might be a CSS only solution, but then you will have to use a CSS transition with an 'infinite' delay which is kind of a 'hacky' solution :).

UI / UX Design html-css web-design
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: Which one is more important either Keyword or Brand?

It depends... like with a lot of things :)

If you still need to get your name out there, in other words if your unknown to the mass, then your brandname is more likely the route to take.

Search Engine Strategies seo
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: The audio element wont play

Aha... yeah, that rule is also in normalize.css http://necolas.github.io/normalize.css/

Web Development php
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: Menu bar doesnt appear on mobile devices

It has to do with the way you implemented it.

UI / UX Design web-design
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: FetchAll vs while loop

U wrote too much. btw i ddint find anything about traffic

You could also respect his time and say: "Thank you!"

Web Development php
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: Jquery gallery

If you want only 3 pictures in a row, then you should give a max-width to the #container div so that it can hold only a maximum of 3 pictures in a row. This is a very basic principle of CSS.

Container in this demo has a max-width of 600px.
http://cssdeck.com/labs/full/auaaljix

Web Development javascript javascript-jquery
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: Jquery gallery

Why did you wrap that <div style="margin: 150px 0 0 -530px;"> with the weird margins around the last item? That's breaking the layout after sorting. Just get rid of it! Also wrapping the images in a paragraph tag is also not necessary... just give the image the class on which you want to sort.

Also delete the stuff from the original Isotope demo in your demo, because you don't use it and don't need it which makes things only more confusing and complicated then that it is already for you.

Web Development javascript javascript-jquery
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: The audio element wont play

Whatever te issue is, if you define 4 sources to your audio file, those files need to be converted to the proper format of the mime type, otherwise it's no point to use 4 source tags if you only load an mp3 version of your audio.

Web Development php
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: Jquery gallery

Create a demo with your code, so we can see what you mean. You can use an online editor such as these:

And for the images in that demo, you can use http://placehold.it/

Web Development javascript javascript-jquery
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: The audio element wont play

Sorry, I don't have a clue what could possibly be wrong. Perhaps you want to try with audio.js or mediaelelement.js. Both are build on top of the audio tag so you can find out if the problem is in your implementation of the audio tag or that is a local server config issue.

Web Development php
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: The audio element wont play

I saw indeed that Firefox supports mp3 natively since version 21, so that's for 2 years already :) An ogg version is only needed if you have to support Firefox versions before that.

Try to set the mime type to audio/mpeg instead of audio/mp3.

Web Development php
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: The audio element wont play

There are loads of audio converters. There are even online converters such as this one. I never used it myself and I don't know if you can do batch conversions with it.
http://online-audio-converter.com/

I use WavePad or Audacity, but these are full fledged audio editors.

Web Development php
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: JS Toogle doesnt work correctly

make it a class hide, because an element can't have two ID's either and toggle that class instead.

$("#chatwindow").toggleClass("hide");
Web Development file-system javascript
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: include header php and html head

header.php should only contain the code/mark-up that is for your menu, Thus no doctype, no head, no html and no body tags, just only the relvant code/mark-up for you menu. Do you have it like that?

Web Development html-css php
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: JS Toogle doesnt work correctly

Someone else told you already that you can only have one unique ID on a page, but you still have 5 here. Multiple classes is okay, so you should have something like this instead:

<span id="Maxi" class="frnd">Maxi</span>
<span id="John" class="frnd">John</span>
<span id="Henry" class="frnd">Henry</span>
<span id="Max" class="frnd">Max</span>
<span id="Simon" class="frnd">Simon</span>
Web Development file-system javascript
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: include header php and html head

The question is what do you want to load with an include. A menu/navigation I can understand, so that you don't have to add a menu item on every page if you need to, but you say you want also what's in between the head tag in that include. Are you planning to change dynamically the meta data, title tag, stylesheets, etc. for every page then?

Web Development html-css php
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: The audio element wont play

All your audio files are mp3's, but Firefox needs ogg hence type="audio/ogg", so you have to convert your mp3 to ogg for Firefox. And for the others you have to load also your audio as a wav file and a mp4 file.

Web Development php
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: MDB FILE CORRUPTED

What's with all the duplicate threads???

Databases
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: when i resize the screen the info on the first image is hidden how do i fix

Looki into CSS media queries.

UI / UX Design web-design
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: java toggle with css problem

Yes, of course... toggle :)

You could toggle a class close with jQuery and use CSS transitions for the animation.

My fork:
http://codepen.io/gentlemedia/pen/gprmVY

Web Development html-css javascript
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: So i have this gallery with javascript and i need to enter descriptions

EDIT: Actually... ignore the below, I was too quick with my answer, because I see now you're totally after something else :)

But @JerrimePatient pointed you in the right direction, because we don't need JavaScript anymore for this. Actually already for a loooong time.

We can do this 'on mouseover reveal desciption' pure with CSS and with some nice anmiations if you want.

Example HTML:

<figure>
  <img src="yourimage.jpg" alt="" />
  <figcaption>your description</figcaption>
</figure>

Example CSS:

figure { position: relative }

figcaption {
  position: absolute;
  width: 90%;
  bottom: 0;
  left: 0;
  padding: 5px 5%;
  background-color: black;
  color: white;
  text-align: center;
  opacity: 0;
  transition: opacity 1s;
}

figure:hover figcaption,
figure:focus figcaption { opacity: 1 }

Demo: http://cssdeck.com/labs/full/snwgrxxk

Web Development javascript
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: java toggle with css problem

You can't use .slideToggle() for CSS properties. You'll need .animate() to do so.
Something like this:

$('#windowhead').click(function(){
    $('#fullwindow').animate({
        height: "20px"
    }, 300 ); // duration
});

http://api.jquery.com/animate/

Web Development html-css javascript
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: Jquery gallery

You'll need to load the jQuery library otherwise it's not going to work.

It can't sort your pictures, because that's not what you targeting with:

var $container = $('.isotope').isotope({
    ...
});

div .isotope is the one with the element-item and the data-attributes (to sort) and you only have one of them now, so there's nothing to sort :)

Here... this is what worked for me:

<html>
<head>

<style>

body {
  padding: 100px;
}

.button-group {
  margin: 5px;
}

.item {
  width: 150px;
  height: 150px;
  margin: 5px;
  padding: 10px;
  color: black;  
}

.item > * {
  margin: 0;
  padding: 0;
}

.metal { background-color: gold }
.metalloid { background-color: silver }

</style>

</head>
<body>

<div id="sorts" class="button-group">
  <button data-sort-by="original-order">original order</button>
  <button data-sort-by="name">name</button>
  <button data-sort-by="symbol">symbol</button>
  <button data-sort-by="number">number</button>
  <button data-sort-by="weight">weight</button>
  <button data-sort-by="category">category</button>
</div>

<div id="container">
  <div class="item transition metal" data-category="transition">
    <p class="number">79</p>
    <h3 class="symbol">Au</h3>
    <h2 class="name">Gold</h2>
    <p class="weight">196.966569</p>
  </div>
  <div class="item metalloid" data-category="metalloid">
    <p class="number">51</p>
    <h3 class="symbol">Sb</h3>
    <h2 class="name">Antimony</h2>
    <p class="weight">121.76</p>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.min.js"></script>
<script>

$(function(){
  var $container = $('#container').isotope({
    getSortData: {
      name: '.name',
      symbol: '.symbol',
      number: '.number parseInt',
      category: '[data-category]',
      weight: function( itemElem ) {
        var weight = $( itemElem ).find('.weight').text();
        return parseFloat( weight.replace( /[\(\)]/g, '') );
      }
    }
  });
  // sort items on button click
  $('#sorts').on( 'click', 'button', function() {
    var sortByValue = $(this).attr('data-sort-by');
    $container.isotope({ sortBy: sortByValue });
  });
});

</script>
</body>

</html>

Demo: http://cssdeck.com/labs/full/c0oltphk

Web Development javascript javascript-jquery
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: Jquery gallery

You do need to include jQuery as well
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Web Development javascript javascript-jquery
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: Jquery gallery

What you have now here is without sorting, so therefore there is no sort button.

Look at the 'sorting' example and follow those instructions.
http://isotope.metafizzy.co/sorting.html

Web Development javascript javascript-jquery
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: Jquery gallery

Things that are weird:

Is the isotope file really in a subdirectory to within a directory path?
<script src="/path/to/isotope.pkgd.min.js"></script>

There's also a div #container in your head??? Or actually I don't see any head or body tags.

There are 2 isotope functions and both do different things

There are 2 more #container divs in your markup.

Web Development javascript javascript-jquery
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: Unwanted slider bar on outer wrapper

Glad you've sorted it out! You can also get rid of this CSS kung-fu :) because without it, it looks the same. Just delete the whole CSS block and you will see!

#logo {
  height: 0px;
  width: 860px;
  padding: 0em 0em 27.5em 0em;
}
UI / UX Design web-design
gestler commented: gentlemedia's response led me to the right path for fixing my problem. Can't thank you enough. +0
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: Jquery gallery

Well, I posted earlier a link to several dynamic layout plugins, but there's nothing wrong with Isotope... it's your implementation. Making an exact copy of a demo and throwing in your own images is obviously not the way to go.

Just download or link only to the isotope.pkgd.js CDN file and follow the 'Getting Started' instructions.

Web Development javascript javascript-jquery
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: Is there any negative-effect from Google?

No evidence!

Search Engine Strategies image seo
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: Unwanted slider bar on outer wrapper

I see your #innerWrapper div start's in your #logo div, which breaks your layout and causes this unwanted scrollbar in #logo div and not in #outerWrapper div.

Tip: Issues like this you spot in seconds with the browser developer tools.

UI / UX Design web-design
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: Hidden div is appeared by default when the page loads

Use CSS or JS first (on page load) to hide it, but which method or properties depends on how you want to show it on click.

What do you have so far?

Web Development gui html-css javascript
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: Need help with Bootbox.js library

It is pretty active, but how on earth can people debug from an image. Can't you place your page and assets online somewhere?

I do notice that your href=# misses double quotes href="#" and you'll need to block the default behavior of the link with e.preventDefault()

Web Development cms html-css javascript
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: Is there any negative-effect from Google?

No, I don't think so!

Search Engine Strategies image seo
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: Is there any negative-effect from Google?

@Hulk_1 - Indeed, but that was not the question!

Search Engine Strategies image seo
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: Is there any negative-effect from Google?

I don't think we have to worry much about bad links to our sites, because we simply can't have control about this fully. Everybody, and therefore also your competitors, can post your web address on shitty low quality websites, so that it might hurt your ranking. Google must know this can happen as well.

Search Engine Strategies image seo
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: Jquery gallery

Just use bigger pictures and less items on a row!
In what way more organized?

Web Development javascript javascript-jquery
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: Is there any new search algorithm update in 2015 ?

You could also use a tracking tool to track or monitor Google algo updates.
http://www.suvaance.com/how-to-track-or-monitor-google-algorithm-updates/

Search Engine Strategies seo
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: SEO Powersuite

I'm starting to doubt about the accuracy of the Pagerank Checker tool in this suite as well now, because I do for a client some checks with certain keywords in google.nl, but the results are way more different when I check with google.nl directly in the browser (Chrome incognito window).

Search Engine Strategies seo
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: SEO Powersuite

Thanks, Emma! The results seems to be accurate enough, but I still have doubts about the tool. I did some research on Google for reviews and such, but I also saw that the company pushes a lot of sponsored blog posts on pretty big name blogs such as Searchengineland and The Next Web which looks to me too spammy. If you have really a good product, then you don't need to do this so often.

The reviews I've read are so and so :)

Search Engine Strategies seo
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: Edit my existing Website with Adobe Photoshop

Why would you want to edit your HTML in a photo editor? It's not possible by the way, but how did you edit your HTML before then? Web designers do design website comps/mock-ups or assets in Photoshop and you could in the old days export your design to (bloated) HTML with it, but what you want is not done before :)

Or do you mean with 'editing' the content (text, images, etc.) of that HTML file?

UI / UX Design adobe file-system javascript javascript-jquery web-design
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: Jquery gallery

Pretty much all the demos have a usage/how-to-implement section, so what don't you understand?

Web Development javascript javascript-jquery
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: Suggestion and ideas needed

Ohkay... so you did need the !important rule. Oh well, I'm glad we've sorted this one out!

Don't forget to mark this thread as solved!

UI / UX Design web-design
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: Suggestion and ideas needed

Yes exactly.

Ok, I see! In navigation.css you have commented out position: relative on #main-nav .vnav__item, but since there is also a position: relative on .vnav__item in vnav.css (which you can't edit), you will need to do this instead in navigation.css.

#main-nav .vnav__item {
    position: static
}

This selector chain has a stronger specificity then the one in vnav.css (vnav.css gets injected later in the source, then navigation.css), so it should be enough to override it.

What I was thinking... if I put a javascript before the navigation... takes the behavior away

I don't know what you mean with this!

UI / UX Design web-design
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: Suggestion and ideas needed

So you can't edit vnav.css, but you can edit navigation.css?

UI / UX Design web-design
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: redirect page

My PHP skills are very limited, so you'll have to wait for someone else to jump in :)

Web Development php