Since I'm complete new to this, I'll try to be as clear as possible.
My questions concerns the positioning of my buttonicons for my mobile pages.
Basically, for every page there is an option to select an icon which gets displayed to the left of the page title.
How would I change the positioning below in order to get the icons displayed on the right side of the page titles. Unfortunately I can't post a screenshot of the current and ideal situation. Ideally I would like to have the page titles slightly more to the left.
I hope this still makes sense without a screenshot.
if($page->buttonicon){
$icon = "<img src=\"icons/".$page->buttonicon."\" style=\"position:relative; top:33px\">";
}
else{
$icon = "<img src=\"images/noicon.png\" style=\"position:relative; top:33px\">";
}
$menurow = "<li id=row_".$page->id." style=\"display:$rstyle\">$icon<a class=\"".$bs."\" href=\"".trim($page->url)."\" $target >".$page->title."</a></li>\n";
If I may say, referring me to another post doesn't help me a lot since I'm completely new to this, so in order to avoid getting confused - I need this particular code to be used/rewritten.. :)
Any help is more than welcome, thanks in advance!!
EDIT
The CSS stylesheet doesn't seem to affect the positioning. The CSS stylesheet only seems to be called for the layout of the navigation buttons. The icons within the navigation buttons are related to the first code mentioned above.
With CSS you can float HTML elements example:
float:left
float:right
If that doesnt work try setting the position of the element to absolute and physically margining the element into place:
position:absolute;
margin: 10px, 10px, 10px, 10px
In your code, this inserts the image:
if($page->buttonicon){
$icon = "buttonicon."\" style=\"position:relative; top:33px\">";
}
else{
$icon = "";
}
and this inserts the title:
$menurow = "id." style=\"display:$rstyle\">$iconurl)."\" $target >".$page->title."\n";
If no CSS interferes, you should be able to simply switch the order of those two statements to get the desired effect.
EDIT
Thanks. Something like the code below? I tried (without any luck):
if($page->buttonicon){
$menurow = "<li id=row_".$page->id." style=\"display:$rstyle\">$icon<a class=\"".$bs."\" href=\"".trim($page->url)."\" $target >".$page->title."</a></li>\n";
$icon = "<img src=\"icons/".$page->buttonicon."\" style=\"position:relative; top:33px\">";
}
else{
$icon = "<img src=\"images/noicon.png\" style=\"position:relative; top:33px\">";
}
Related
I'm a very basic coding person that needs something to work, but IDK how. I have a website where I have 4 images. When you hover over those img they become slightly darker, but I wish there was a way to show some text as well (preview of how it should work: https://imgur.com/a/r5cOW2R)
Here's the link to my GitHub code: https://github.com/Ezzol/HCI-Portfolio
Can anyone explain to me what I need to do to add that hovereffect you can see in my design at the imgur link?
You would want to use the CSS hover event. Here's a good example on how to do that.
https://www.w3schools.com/howto/howto_css_image_overlay.asp
you probably need to use javascript as well, and do an EventListener to tell when it is being hovered over, and then use .style to change it, for example:
var text = document.getElementById("text");
var exampleimg = document.getElementById("exampleimg");
exampleimg.addEventListener("mouseover", examplechange);
exampleimg.addEventListener("mouseout", examplechangeback);
function examplechange(event)
{
text.style.display = "block";
}
function examplechangeback()
{
text.style.display = "none";
}
add a h1/h2/h3/p element to your page, and give it the id "text" then style it how you want and set the display to none.
I converted my wordpress theme to responsive..
all values of "width" change to percents (%)
and the poroblem is :
from 400px width it show:
first line 2 post
second line just one post (instead 2 post)..
how can i fix that so the page will show 2 post in all line?
i attached some pictures to explain the situation.
image of smartphone until 400px width
image of 500px
Ok your situation was a little tricky. The theme was not really designed in the best way to make those "blocks" responsive. To make it work I added js to your footer (you can move this to a js file if you prefer)
<script>
function equal_cols(el)
{
var divs = jQuery(el);
divs.css('height', '');
var tallestHeight = divs.map(function(i, al) {
return jQuery(al).innerHeight();
}).get();
divs.css('height', Math.max.apply(this, tallestHeight));
//alert(Math.max.apply(this, tallestHeight));
}
( window ).resize(function() {
$('.products-row').each(function(){
var el = $(this).find('.product-container');
equal_cols(el);
});
}).resize();
jQuery(window).resize(function() {
columnConform();
});
jQuery(document).ready(function() {
columnConform();
});
Then in the movie-home.php and taxonomy-movie-genre.php file I commented out the "clears" that were being added every third row. We don't need that any more since we are making all the boxes the same size with JS.
<?php /* if(++$counter % 3 == 0) : ?>
<div class="clear"></div>
<?php endif; */ ?>
The only gotcha is that all the boxes are the same size now regardless of how much content is in them.
I have a problem. When I post a featured image in a post and I publish, the only thing that is seen is one color background. The funny thing is that only one picture works. I have 5 pictures. 1 of them is showing up. All have the same size, all are .jpg. I don't know what to do. Has anybody seen something like that?
This is the functions.php
function fotosani_setup(){
add_theme_support('post-thumbnails');
add_image_size('small-thumbnail', true); /* width, height, softcrop*/
add_image_size('banner-image', true);
}
add_action('after_setup_theme','fotosani_setup');
CSS is just styling for the border.
single.php is calling in the same way as in index.php
<div class="post-image">
<?php the_post_thumbnail('banner-image'); ?>
<?php
echo the_content();
if(is_active_sidebar ('post1')) : ?>
</div>
Your function calls to add_image_support() are not correct.
add_image_size('small-thumbnail', true); /* width, height, softcrop*/
add_image_size('banner-image', true);
is equivalent to:
add_image_size('small-thumbnail', 1); /* width, height, softcrop*/
add_image_size('banner-image', 1);
In other words, you are creating images that are 1px wide.
You need to set the widths and heights to what you want, just like the comment says:
add_image_size('small-thumbnail', some width, some height, true/false);
add_image_size('banner-image', some width, some height, true/false);
Anybody know how I could wrap the text in reverse order, from bottom to top?
I attached an example image.
[][http://i.stack.imgur.com/RVsIG.jpg]
Instead of breaking the line after it is full and having an incomplete line at the end, I need to brake somehow from bottom to top, so bottom lines are full and top line is incomplete.
I would not recommend using exotic CSS attributes which aren't even in Chrome & Firefox yet. The best cross-browser solution is to handle this in Javascript when the document loads. Here's a sketch of how to do that:
$(function() {
$(".title").each(function(i,title) {
var width = 0;
var originalHeight = $(title).height();
var spacer = $('<div style="float:right;height:1px;"/>').prependTo(title);
while (originalHeight == $(title).height()) {
spacer.width( ++width );
}
spacer.width( --width );
});
});
Working JSFiddle is here: http://jsfiddle.net/zephod/hfuu3m49/1/
6 years later, but fret not! I have found a pure CSS solution!
Turns out you can achieve this result with flexbox, but it's not obvious or very straight forward. This is what I started out with:
I want the header to be "bottom-heavy", the same effect as you describe in the question.
I began by splitting up my string by whitespace and giving them each a <span> parent. By using flex-wrap: wrap-reverse, and align-content: flex-start. You will achieve this:
Oh no! Now the order is messed up! Here comes the trick. By reversing both the order in which you add spans to the HTML and the direction order of flex with 'flex-direction: row-reverse', you actually achieve the "pyramid-shaped" upwards overflow effect you desire.
Here is my (simplified) code, using react and react-bootstrap:
<Row className='d-flex flex-wrap-reverse flex-row-reverse align-content-start'>
{props.deck.name
.split(' ')
.reverse()
.map(word => (
<span className='mr-1'>{word}</span>
))}
</Row>
There is no general css solution for it. You must have to utilize help of any language.
This is one of the solution using PHP:
<?php
$str= "This is what I want to achieve with your help";
$str = strrev($str);
$exp = str_split($str,18);
$str = implode(">rb<", $exp);
echo strrev($str);
?>
Well, if that is depending on the text, then you can try something like a word replacer. For example
var words = "This is what I want to achieve";
var newWords.replace("what", "what <br />"); // note the line break
document.write(newWords);
Here is a fiddle for you: http://jsfiddle.net/afzaal_ahmad_zeeshan/Ume85/
Otherwise, I don't think you can break a line depending on number of characters in a line.
Wrap and Nowrap will be rendered by the client-browser, so you can not force the browser to wrap from bottom to top. but you can do that with javascript or asp.
This is not a formal solution for this problem. But see if this helps.
The HTML CODE
<div id="mydiv">
I can imagine the logic behind the code having to detect what is the last line, detect the div size, and the font size... then measure how many characters it can fit and finally go to the above line and insert the break where necessary. Some font families might make this harder, but trial and error should solve the issue once the basic code is set..
</div>
CSS:
#mydiv
{
width:1000px;
line-height:18px;
font-size:20px;
text-align:justify;
word-break:break-all;
}
Here setting the div width around 50 times that of the font-size will give you the precise result. Other width values or font values might slightly disorient the last line, giving some blank space after the last character.(Could not solve that part, yet).
JQuery:
$(document).ready(function(){
//GET the total height of the element
var height = $('#mydiv').outerHeight();
//Get the height of each line, which is set in CSS
var lineheight = $('#mydiv').css('line-height');
//Divide The total height by line height to get the no of lines.
var globalHeight = parseInt(height)/parseInt(lineheight);
var myContent = $('#mydiv').html();
var quotient = 0;
//As long as no of lines does not increase, keep looping.
while(quotient<=globalHeight)
{
//Add tiny single blank space to the div's beginning
$('#mydiv').html(' '+myContent);
//Get the new height of line and height of div and get the new no of lines and loop again.
height = $('#mydiv').outerHeight();
lineheight = $('#mydiv').css('line-height');
quotient = parseInt(height)/parseInt(lineheight);
myContent = $('#mydiv').html();
}
//get the final div content after exiting the loop.
var myString = $('#mydiv').html();
//This is to remove the extra space, which will put the last chars to a new line.
var newString = myString.substr(1);
$('#mydiv').html(newString);
});
If you already know where you want your breaks to take place just use simple HTML breaks to break your content and have it display the way you want.
<p>This is what<br/>
want to acheive with your help</p>
If you set the breaks manually (and you know where you want them to break) then create them yourself.
You could also try setting separate css width adjustments based on the dimensions of the screen you are seeing the breaking you are not liking and set an #media reference to make the div width smaller to break the text so it doesn't run unevenly across the top of certain size devices.
Use display: inline-block; on the text div.
ok there are several similar questions but not quite anything that I want.
I have few ajax requests on page and I want to show the image in the center of the screen, and its all working OK.
Just to make it look more prominent, I wanted to place that image on a div with translucent background, so its more obvious for the end users. Now comes the tricky part.
I made the div with css like this:
.divLoadingBackground
{
filter: Alpha(Opacity=40); -moz-opacity:0.4; opacity: 0.4;
width: 100%;
height: 100%;
background-color: #333;
position: fixed;
top: 0px;
left: 0px;
}
This fills the page up alright, or, I should say, this fills the viewport. If I scroll the page down, the page is again normal. I want this div to span the ENTIRE LENGTH of the page, no matter how long the page is.
Here is an example mockup of the problem I made to quickly demonstrate:
As you can see, I took the example of SO for the mockup ;) image 1 shows that its okay when it appears. image 2 shows that it goes up with the page on scroll.
I'm a c# developer and css is as alien to me as ancient latin.
How to make this divLoadingBackground div to fill out the entire length of the page?
Many thanks for any help.
If you need any additional info, please comment!
One thing I dont see in your css is z-index. Fixed, although, fixes this problem, sometimes, based on how other divs are positioned, your divLoadingBackground div could end up in one of the divs.
try adding
z-index: 9999;
or something similar and see if it works.
Would have put this in a comment, but it seems I have too low rep to comment.
Where is the .divLoadingBackground div located in the DOM tree? Since it has fixed position, it shouldn't scroll with the page. This makes me belive that the element is too deeply nested. Try putting it right in the body level of the page and see if that helps.
Also, are you sure that some other css directive isn't changing the position attribute to absolute or something?
Also, make sure to use the right DOCTYPE. That has some impact on fixed position elements.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Oh, and ofcourse, fixed position isn't supported in IE6 and below.
I believe you will need JavaScript/jQuery to dynamically set the height of the div in question to the height of the page once rendered.
And if you're entering the world of web, it's time to learn that new language "CSS" as well as perpahs-not-quite-as-daunting JavaScript.
When I needed such a functionality some years ago, I examined how Google Calendar did it.
Basically, they use a timer-driven JavaScript file that checks for the height of the window and adjust the height of a contained DIV tag accordingly (or of an IFRAME tag, just any container tag that you like).
Here is a code snippet from a page I worked on:
<script type="text/javascript">
document.getElementsByTagName("body")[0].style.height = "100%";
document.getElementsByTagName("html")[0].style.height = "100%";
document.getElementsByTagName("body")[0].style.minHeight = "100%";
document.getElementsByTagName("html")[0].style.minHeight = "100%";
function height()
{
try
{
height_iframe();
}
catch(err)
{
}
}
window.onload=height;
// --
var ie6WorkaroundIFrameResize = 1;
function height_iframe()
{
var any = false;
var offset = 300;
var c = document.getElementById("iframecontent");
if ( c!=null )
{
c.style.height = (GetClientHeight()-offset)+"px";
any = true;
var d = document.getElementById("iframeie6");
if ( d!=null )
{
d.style.height = (GetClientHeight()-(offset+ie6WorkaroundIFrameResize))+"px";
any = true;
ie6WorkaroundIFrameResize = 0;
}
}
if ( any )
{
setTimeout( 'height_iframe()', 300 );
}
}
function GetClientHeight()
{
return document.documentElement.clientHeight;
}
</script>
Basically, the script regularly checks for the height of the window via the GetClientHeight() function and adjusts the element in concern ("iframecontent") accordingly.
I subtract some offsets of fixed-height headers and footers.
AFAIK you would need to set the size of this divthrough javascript. I would recommend using jQuery, in this way :
//$(document).height() gives the size of the document
//(as opposed to $(window).height() that would give the size of the viewport
$("div#overlay").css('height',$(document).height());