Posts by gentlemedia - Page 3

I guess it's time then to loosen up these rules :) Low quality content is never good for DW in terms of SEO.

@happygeek - just ban these posters!!! You know why they're here, so pull the trigger on them!

(I refuse to call it football. We have the real football here. Flame away. :))

hehe... no, your 'football' is what we call handball here. :)

Yes, that's what that meta viewport decleration does and that's the one you need to get a responsive menu. With the current viewport decleration the whole page gets crammed/shrinked into the small screen on mobile, so everything is way too small to read anyway unless users pinch/zoom
If they want a better user experience on mobile, then you have to include the new meta viewport declaration and making the layout of all the pages responsive. And to be honest this is out of your league.

You DON'T create two versions of your navigation! I told you (in one of your other four threads regarding this same issue) that you have to REPLACE the markup (HTML) from your current navigation with the navbar markup that comes with Bootstrap out of the box. The classes on that Bootsrap navbar will handle the responsiveness for your mobile nav. The only thing that you have to to do is change the default design of the navbar to that of your current navigation.

Check these two Bootsrap navbar examples.
https://bootsnipp.com/snippets/Oe7QM
The first is the default and the second the inverse version. The mobile version of the navigation is baked in the Bootstrap CSS file (which you load twice by the way on http://www.purelineliving.com/ - Get rid of one!!!). You don't have to do much else!

You use Bootstrap so STICK to the HTML (markup) & CSS (classes) of the framework and certainly if you don't have any clue what you're doing.
https://getbootstrap.com/docs/4.0/getting-started/introduction/

I also mentioned before that you have horizontal scrollbars on tablet and mobile screens, because your images are not responsive. They have all defined width and height attributes in the markup, so they won't shrink once the screen gets smaller.

You take the bootstrap navbar markup and then you replace/overwrite the default CSS of it with the CSS (design and spacing) that you have written for your current navigation.

Resize your browser window to narrow and then use inspect element (dev tools) to find the element and its CSS that's causing that extreme height.

You've asked this question already and you've gotten the answer already too.
https://www.daniweb.com/digital-media/ui-ux-design/threads/515397/navigation-bootstrap

This will do it

function checkmax(el) {

    if(el.value.length == 9) {

        $(function() {
            $('#dCell').change(function() {
                var dCell = $(this).val();
                $('#cCart').data('name', dCell)
            });
        });

    } else {

    }

}

See here: https://codepen.io/gentlemedia/pen/ZvMgBJ

Did you also changed $('#cCart').data('data-name', this.value); to $('#cCart').data('name', this.value);? Because you don't inlcude data- in it unles you use .attr() instead of .data()

Line 6 should be:

$('#cCart').data('name', this.value);

EDIT:
And line 5 should be:

$('#dCell').change(function() {

Like pty said!

But you will have to replace the current markup for that navigation to the bootstrap navbar markup.
https://getbootstrap.com/docs/3.3/components/#navbar

But 2, the layout of that website is totally broken (not responsive) on tablets and mobile phones, so you might want to fix that first.

Most of them are based on Isotope.
https://isotope.metafizzy.co/

I was a bit late with my post and see that you created a jsfiddle with your code. Only your fiddle misses the jQuery library so your function doesn't do anything.

I was curious what your code does, so I've created a demoi of it in codepen and without the transform property the table row is fixed at the top in the latest Chrome. Ok, it looks awful, but it's fixed, so what's the problem?

https://codepen.io/gentlemedia/pen/KZqNoL

I also would like to mention that there is an explicit element for table headers which is <thead>

<table>
  <thead>
    <tr>
      <th>Header content 1</th>
      <th>Header content 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Body content 1</td>
      <td>Body content 2</td>
    </tr>
  </tbody>
</table>

rproffitt is right and it also depends on what your objectives and criteria are. There are things that Anguar 2 can do while React can do this not and visa versa.

https://medium.com/javascript-scene/angular-2-vs-react-the-ultimate-dance-off-60e7dfbc379c

This is because the page you share via WhatsApp has certain metadata included within the head of the HTML. It's called the Open Graph protocal and it's invented by Facebook so that when people share webpages on Facebook it shows a title, description and image in their posts. Now since WhatsApp is from Facebook, WhatsApp uses this metadata too to display a title, description and image in your message.

<html prefix="og: http://ogp.me/ns#">
<head>
<title>The Rock (1996)</title>
<meta name="description" content="description of your website/webpage">
<meta property="og:title" content="The Rock" />
<meta property="og:description" content="Kick ass movie bla, bla, bla..." />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
...
</head>
...
</html>

More info about OG here http://ogp.me/ and for testing or debugging your OG metadata here https://developers.facebook.com/tools/debug/

Since someone changed my first password and makes me cannot login.

Yeah, you could wait for that :))))

Oh... and it was not me!

There is a onclick="deleteTimeLine(this)" on that anchor tag, so that function somewhere in your JS will do something.

In data-* attributes you can store data for that elelment which you then can manipulate with JS .data().

Those tags {{$data->tittle}}are from a JavaScript templating engine such as Mustache or Handlebars, but there are heaps more. Do you use one or don't you know THAT you use one?

Also insert the name and the price from your database in data attributes. Something like this:

<p class="product-name" data-name="<?php echo $row['fld_product_name'] ?>"><?php echo $row['fld_product_name'] ?></p>
<p class="product-price" data-price="<?php echo $row['fld_product_price'] ?>">RM <?php echo $row['fld_product_price'] ?></p>

BUT... you will need to replace the white spaces with dashes and convert to lowercase, before you insert them into your data attributes.
https://stackoverflow.com/questions/11330480/strip-php-variable-replace-white-spaces-with-dashes.

Or you could do this is also within your jquery function.
https://stackoverflow.com/questions/1983648/replace-space-with-dash-and-make-all-letters-lower-case-using-javascript

Now you can sort based on the values of the data attributes.

Here's an example for price:
https://codepen.io/glensargent/pen/zqwbqZ

For alphabetical sorting there are probably also examples to find.

I did a backlink check with that celeb style outfit webshop on monitorbacklinks.com and pretty much all the backlinks that I could check were from (irrelevant) forums or blog posts with fake questions or comments including spammy links like the one above from the OP, so this is a good example how NOT to do backlinks, if you outsource your SEO to so called cheap 'SEO specialists' that hurts your PR more than that it improves.

https://checker.monitorbacklinks.com/seo-tools/free-backlink-checker/celebstyleoutfits.com

Why creating it yourself? There are heaps of free and payed applications for that.

Here's one for free: https://www.waveapps.com/invoice/

I explained 1 already in a previous post and 2 also kind of. For that you might want to look into HTML5 Canvas and/or SVG.

My advise is to stop caring about Alexa ranking. Alexa data is not real world data! There are loads of articles and blog posts online with numbers and all explaing why you shouldn't care about it.

Just put all your efforts and time in SEO.... and in optimizing your websites' performance/speed for a better user expoerience.

Okay, not sure why it gives a delay undefined, but try it with a setTimeout function instead.

$('#profile_picture').click(function () {
    toggleOptions($(".selector"));
    setTimeout(function() {
        $('#profile_picture, .image_road').hide();
    }, 2000);
});

1 - Add the z-index to the CSS block .selector .social-media-box in your CSS file

2 - I have no idea what you want with a water effect

3 - No that's not how it works. Just use a delay. In the example below if you click on the profile picture first the options gets hidden and after 2 seconds, the profile picture itself and the rays of light gets hidden. Adjust the delay to your linking.

$('#profile_picture').click(function () {
    toggleOptions($(".selector")).delay(2000).queue(function () {
        $('#profile_picture, .image_road').hide();
    }).dequeue();
});

Your .selector .social-media-box is covering that water.gif image due to the position: absolute;. If you add a z-index: -1; then it doesn't cover the image anymore.

I wonder why the gif image is not clickable

Hard to tell why without seeing any page with that image

I guess you'd better off asking at the nextcloud forum.
https://help.nextcloud.com/

You could do this:

$('#profile_picture').click(function (e) {
    toggleOptions($(".selector"));
    $('#profile_picture, .image_road').hide();
});

But theh you can't interact wth the profile picture anymore, because it wil set it to display: none, so you will have to be more specific how you want to hide it and how do you want it to to show up again.

What do you suggest to optimize performance.

Well since you have a WordPress site you could start with this guide:
https://premium.wpmudev.org/blog/speeding-up-wordpress/

Also just remove unnecessary content. For example on that Lote Las Vueltas property page I see 2 different galleries (a slider and a lightbox) with the same photos. Get rid of one! And the original dimensions of the lightbox thumbnail images are twice as big as that they get displayed on the page. Anyway there are loads of things you could/should do to decrease page weight & http requests, and optimize for speed on the server and on the front-end, but that guide wil get you in the right direction. Good luck!

In one of your CSS files you have pointer-events: none assigned to those inputs. Not sure why someone did that, but this make them not clickable/touchable and thus not fillable, so just remove the pointer-events properies and you're good.

Here are the CSS blocks which are somwhere in http://landbankrealestate.com/wp-content/cache/wpfc-minified/11b1517ad7f8f66fbdcf632c640fc3eb/1511459389index.css.

.wpestate_estate_property_design_agent #agent_phone {
    width: 31.5%;
    pointer-events: none;
    cursor: default
}

.vc_col-sm-4 .wpestate_estate_property_design_agent #agent_contact_name, 
.vc_col-sm-4 .wpestate_estate_property_design_agent #agent_user_email,
.vc_col-sm-4 .wpestate_estate_property_design_agent #agent_phone {
    width: 30.8%;
    pointer-events: none;
    cursor: default;
}

I have to say too that you might wanna optimize for performance as well, because that page is huge (18Mb in size is rediculous) and has 158 http requests to resources (CSS, JS and images) which makes loading take forever on slow/bad connections.

https://gtmetrix.com/reports/landbankrealestate.com/365fAXUU

I'm using Mailchimp too for some clients of mine. With the free account you can do already quite alot. If you're not familiar with (properly) coding your own HTML emails/newsletters there are loads of templates you can choose from. Campaign Monitor is another great email marketing service.

There are also email frameworks which you could use to create your own templates if you don't know how to do that with proper HTML (table layouts). With these frameworks you use custom markup language to create your layouts and then generate the HTML to import into Mailchimp or Campaign Monitor.

heml framework - https://heml.io/
mjml framework - https://mjml.io/

.

Where is that height: 600px declaration for 'PC only'? In an external stylesheet or in the <head>? Why on earth are you using inline styles??? It's bad practice, so don't do it!!!
That inline height: autowill override any height declarations for that div that are set in an external stylesheet or in between <style> tags in the <head>, because of its high specificity. Only a declaration with an !importantadded is higher and therefore stronger then an inline style declaration.

That said... what you see now is exactly what you should see with that height: auto set as inline style on that div. Now the content (your text) dictates the height of that div.

Thanks, Cereal!

It's a shared hosting, so I don't have access to a server config file. Caddy looks interesting. Especially the HTTP/2.

I'm using the following to redirect http to https in my root directory htaccess file

<IfModule mod_rewrite.c>

  RewriteEngine On

  RewriteCond %{HTTPS} off
  RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

</IfModule>

But this seems not to work if I access directly sub directories (http://example.com/sub-directory/) unless I place this mod_rewrite in an htaccess file in all my sub drectories.

Anyone knows a better way to do this? Just in my root htaccess file?

Also you should use $( document ).ready() or even better place all your scripts before the closing </body> tag. Now you initilize tinymce while the HTML and thus the textarea hasn't been rendered yet by the browser.

Your content in those divs dictate the height now and should show the background image. Do you have content in them?

What for errors do you get in your console?

add background-size: cover to your CSS blocks

@ john_111
That article is about the transparent PNG fix we used to need in the past for Internet Explorer 6 and below.

Edge supports alpha transparency, so there must be something else causing this.

Edit: I also don't have Windows and I don't have my Virtual Machine up and running, so can't check at the moment too.

Also...

One problem, I try to open it in IE and it looks a mess. In firefox and google crome it looks good. Why is that?

You're using CSS Grid which is not supported in any version of IE. If you want to use CSS Grid, you should create a fallback solution for browsers that don't support this new layout module.

Check the errors in your browser (web developer) console and https://validator.w3.org/

I am using the grid system. Since it only works in <div id="container"> while I need to use <section id="container"> to make the grid system works.

This doesn't make any sense. An ID is an ID no matter what HTML tag it is.

Also you made up HTML tags such as cont & sidenavand the menu tag is experimental ans has little browser support. You can use those names as grid-area names to use in your grid-area-template declleration, but they can't be HTML elements itself. Unless you create those elemenb with JS like HTML5shiv did to bring support of the new HTML5 elements (section, main, nav, etc.) to old IE and such. But no need for that and would be rediculous..., just use existing HTML elements or tags for them.

... container since it is overlapping the articles.

This is because of the fixed position. Why are you using that?

These are a good place to start with.

https://moz.com/learn/seo

https://searchengineland.com/library/channel/seo

https://neilpatel.com/blog/

https://www.mattcutts.com/blog/

I've found the answer myself :)

There is toFixed() method, so I had to add this to the sumvariable with the 2 as for the 2 decimals;

$('.sum').text(sum.toFixed(2));

I'm using this snippet to calculate the sum of two table cells.

var sum = 0;
$('.amount').each(function(){
    sum += parseFloat($(this).text());
});

$('.sum').text(sum);

But when the sum is for example 40.00 it displays as 40 and as picky as I am, i want it to display as 40.00. So... what to do?

Little (editable) demo: https://codepen.io/gentlemedia/pen/gGXJgR

My thought is they're the same person.

I do find reaching a certain rep level a reaaly good one for this, because someone can post in little time low quality one line questions, such as the ones we see a lot in the Digtal Media forum lately, just to get quckly to those 30 posts that enables the sig. The rep level shows that someone brings value to the forum, so by reachimg a certsin rep level he/she gets rewarded with a sig for that :)

Is the page online somewhere? A link or posting the HTML and related CSS would be more useful then a screenshot.