Place a div behind h2 Tag

Support
#1

Hi There,

I would like to place this DIV behind every H2 tag on all pages of the homepage.

Wenn Ihr diese Seite am Mobiltelefon oder Tablet betrachtet, dreht dieses bitte auf quer und „wischt“ seitlich über die Tabellen um die gesamte Tabelle zu sehen!

bitte das Gerät auf quer drehen

How can I implement this?

Best regards Blume

#2

Hi there,

Thanks for writing around! You can try adding the following script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

jQuery(document).ready(function($){
	$('<div><h3>Wenn Ihr diese Seite am Mobiltelefon oder Tablet betrachtet, dreht dieses bitte auf quer und „wischt“ seitlich über die Tabellen um die gesamte Tabelle zu sehen!</h3><img class="aligncenter" src="http://www.roadeagle-arnsdorf.de/meute/wp-content/uploads/Smartphone-drehen.jpg" alt="bitte das Gerät auf quer drehen" width="304" height="268"></div>').insertBefore('.home h2');
});

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

#3

Hi There,

it works, but unfortunately only on the start page and instead of behind the h2 it is before the h2 tag, is there anything else to adjust here?

I would like to have the function on all pages of the project.

Regards Blume

#4

oh no, it does not work!

The function I want is that when the visitor turns his smartphone into the landscape format, as the message then goes out, as here:
http://www.roadeagle-arnsdorf.de/meute/ergebnisse-rennen-2010/

That is your soloution:
http://www.roadeagle-arnsdorf.de/meute/

I just do not want to put the div into every page by hand, but it would be nice if it could somehow be solved globally.

I would also like the message, if the user has the smartphone in landscape mode, the message no longer appears, as in the first page mentioned.

Regards Blume

#5

Hi There,

We can not do that because there are <h2>s in some areas of the site that you would not want to show your note/notice, what we can do is add your note/notice on top of every page content.

Please add this to your child theme’s functions.php file.

function custom_note() { ?>

<div id="mein_hinweis" class="x-alert x-alert-success fade in">
    <h3 class="center-text">Wenn Ihr diese Seite am Mobiltelefon oder Tablet betrachtet, dreht dieses bitte auf quer und „wischt“ seitlich über die Tabellen um die gesamte Tabelle zu sehen!</h3>
    <img width="100%" class="aligncenter" src="http://www.roadeagle-arnsdorf.de/meute/wp-content/uploads/Smartphone-drehen.jpg" alt="bitte das Gerät auf quer drehen" />
</div>

<?php }

add_action( 'x_after_the_content_begin', 'custom_note', 10 );

I know you already have the CSS needed but I’m going to post it here anyway.


#mein_hinweis {
	display: none;
}

@media only screen and (max-width: 800px) and (orientation: portrait) {
	#mein_hinweis {
	display: block;
	}
}

Hope that helps,
Cheers!

#6

Hi There,

i works great! But how can i chanched the Background color in the message!

Regards Blume

#7

Hi there,

Change the code as follows.

function custom_note() { ?>

<div id="mein_hinweis" class="x-alert x-alert-success fade in">
    <h3 class="my-custom-message center-text">Wenn Ihr diese Seite am Mobiltelefon oder Tablet betrachtet, dreht dieses bitte auf quer und „wischt“ seitlich über die Tabellen um die gesamte Tabelle zu sehen!</h3>
    <img width="100%" class="aligncenter" src="http://www.roadeagle-arnsdorf.de/meute/wp-content/uploads/Smartphone-drehen.jpg" alt="bitte das Gerät auf quer drehen" />
</div>

<?php }

add_action( 'x_after_the_content_begin', 'custom_note', 10 );

Then try adding the follow CSS rule also.

.my-custom-message {
background-color: #336699;
}

Hope that helps.

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.