I'm not really that familiar with php so hence the question. I have a list of products that is dynamically created via php. When a user clicks one of the generated lists it sorts the products. I also want to move the user to a new part of the page to see the results. I thought I could do this via an smooth scroll using an onchange, but I'm not that sure where to put it. Site is bootstrap so was going to use the scrolling-nav.js.
here is the php generating the list
<?php
echo '<div id="brands">';
// echo $product['name'].'<br>';
echo '<a href="#top-of-products"><input style="display:none"
type="checkbox" data-type="brand" onchange="showlist(this)"
id="b-'.$brand['id'].'" name="'.$brand['name'].'"
value="'.$brand['name'].'"><label id="b-'.$brand['id'].'"
for="'.$brand['name'].'">'.$brand['name'].'</label></a><br>';
}
echo '</div>';
Help much appreciated
You put short stretch of your code, but, I see a } lost before the last line.
I guess you put your code for scrolling a new part of the page in showlist() javascript function.
But, I don't know if onchange method is the better. I would use onclick method
Is the results panel always in the same location on the page? If so, and you're using the jquery library, consider using jquery's scrollTop function:
$('#item).click(function(){
$(html).scrollTop(val); //where val is the number of pixels hidden above the scrollable area when the Results panel is positioned where you want it to be
});
If the vertical position of the Results panel is variable, you can use this to define the "val" variable above:
$('#id-of-rewards-panel').offset().top
You might want to add a few pixels to that, because that will bring your element to the very top of the page
here is the whole code:
<?php foreach($view->brandfromcategory_data as $brand) {
echo '<div id="brands">';
// echo $product['name'].'<br>';
echo '<input style="display:none" type="checkbox" data-type="brand" onchange="showlist(this)" "scrollTo(#buttonreplacement)" id="b-'.$brand['id'].'" name="'.$brand['name'].'" value="'.$brand['name'].'"><label id="b-'.$brand['id'].'" for="'.$brand['name'].'">'.$brand['name'].'</label><br>';
}
echo '</div>';
?>
Related
I have a table that displays items from a database. One of the items is a description so it can be very long.The thing I'm having the most problem with is how can I use JS and HTML smoothly in my controller class.
I want to be able to display a little bit of it if its longer than 100 char, and a button that looks like '...' where if the user clicks on it, it displays the trimmed text. I want to do this using javascript and here is what I tried, this code is in my controller, so I'm just sending these to the view.
The problem is when I press the button it doesn't display anything so what is wrong here? Some suggested to use jquery but I don't want to write my js script elsewhere and call it again since I'm not sure how I will do that in Phalcon controller.
$this->view->tblColumns = [
'element one',
'element two',
function (tablename $instance) {
if (strlen($desc = $instance->getDescription()) > 100) {
return $shortDesc = substr($instance->getDescription(), 0, 100) . '
<button style="background: none;border: none" onclick="(function(){
var desc= <?php echo
$desc; ?>; document.write(desc) ;
})()" >...</button>';
} else {
return $instance->getDescription();
}
},
do NOT use document.write after load of the page. It will wipe the page
your desc needs to be in single quotes and have no carriage returns.
you cannot use an IIFE in an onclick unless it returns a function
if your button is in a form, you will submit the form - it should be type=button
You MAY mean
<button type="button" onclick="var desc='<?php echo $desc; ?>';
document.querySelector('#someContainer').innerHTML=desc;"...>
but a better way is to toggle the existing text inside tags (span for example)
I find a way to do what I wanted, using the code for read more,read less from this link https://codepen.io/maxds/pen/jgeoA
The thing I was having trouble with in phalcon MVC, was that I didn't know I could my java-script, and css in the view of the controller and that's what I did.
I just used the js from that link, into my view file, the same for the css using tag and tag.
And in the function on the controller I wrote the following `
$this->view->tblColumns = [
'one',
'two',
function(tablename $link){
$desc=$link->getDescription();
$html=<<<HTML
<span span class="more"> $desc</span>
HTML;
return $html;
}`
I want to populate a jQuery dialog with dynamic content from a getData.php file. That works fine so far via:
$("#buttonGetData").click(function() {
$.get("getData.php", function(data){
$("#dialog").html(data);
$("#dialog").dialog();
return false;
});
});
The getData.php just gives something back like:
<p id="data1" class="data">data1</p>
<p id="data2" class="data">data2</p>
<p id="data3" class="data">data3</p>
My problem now is: How do I add a dynamic click listener to each data row so I can use the clicked data in my site? I want each 'p' be clickable and then use the data inside for setting its content to a 'textarea'.
The problem seems to be, that the new dynamically added rows arent part of the JS from the site, so I can't reach them via a clickListener.
How would this be done correctly? Thank You!
When you get html related data result using Ajax like you used $(get)... , your newly generated html from Ajax cannot be used for jQuery code OR in other word jQuery/JS don't recognized your newly added html elements generated from Ajax. There is a way you can achieve your required result. You can send your jQuery/JS code with html codes to Ajax from your file (getData.php) as String.In your getData.php you can echo like this.
echo '<p id="data1" class="data">data1</p>';
echo '<script>';
echo "$(document).on('click', '#data1', function(){alert('DATA1 Clicked');});"
echo '</script>';
die();
Above may be very straight forward answer so there is another way which may be more convicting. You can also used delegation on based on event handler. Examples:
$("#dialog").on("click","p", function(){
alert("DATA1 Clicked");
// your code to add content of this element to textarea
});
$("#dialog").on("click","#data1", function(){
alert("DATA1 Clicked");
// your code to add content of this element to textarea
});
$(document).on('click', '#data1', function(){
alert("DATA1 Clicked");
// your code to add content of this element to textarea
});
One of them should be able to solve the problem.
I have two dynamically driven pages. I am seeking to open the second page so that the image clicked on the first page is at the top of my zIndex as this is how my gallery functions. It is important that the array of the second page remains the same with all associated records in date order.
This is the code I have on the link of the first page which parses information to the second page:
echo "<img src=\"exhibitionimages/".$year."/".$results1->thumbnail."\" class=\"smallimage\">";
The script for the second page that creates the gallery which functions by layering blocks with an infinitely increasing z-index is:
<script type="text/javascript">var z = 10;</script>
$imageid = $_GET['imageid'];
echo "<div id= ".$results1->id." class=\"gallerywrap\">";
(content in div)
echo "</div>";
echo "<div class=\"gallerymenu\" >";
echo "$year";
echo "</div>";
Currently the $imageid above is not called. The following are variations of the script I have alternated in placing on the gallery menu div and the gallerywrap div:
onload=\"id=".$imageid."\"
window.onload=document.getElementById.if("$results1->id"=="$imageid").style.display='block';document.getElementById.if("$results1->id"=="$imageid").style.zIndex = z++;
onload=\"linkedImage(".$results1->id."=".$imageid.").style.zIndex = z++; \"
onload=\"document.getElementById.if(".$results1->id."==".$imageid.").style.display='block'=".$imageid.";document.getElementById.if(".$results1->id."==".$imageid.").style.zIndex = z++'=".$imageid.";\"
My problem is where to place it and what code will function. Ultimately I am trying to say: "if results1->id == $imageid, then up the z-index for that record so it sits on top when the page loads".
I have also dabbled with data_seek on the php end though with not much success.
I've been searching all night to find the answer to this. I'm working on a site and trying to modify the behavior of the hover effect. I'm not sure which .js file(s) are creating the effect and how I should go about modifying them.
Basically, I have a grid layout on the homepage and when you hover over an image, it displays the title and a dark overlay. There's a bit of an animation on the title as well.
I need to add a media query to block this on mobile, and to make the title of the blocks appear on page load. You can see what I mean by visiting the site.
The site is here: theshoemaven(dot)com
I understand that you can use
var mq = window.matchMedia('#media all and (max-width: 700px)');
to create media queries within javascript. But I'm not sure where to apply it, and how to ensure that the title over each box appears on pageload.
I would GREATLY appreciate any help on this. Thanks!
** UPDATE **
I've found the following function which calls the portfolio grid. If I can make it display the title on load (not just hover) I will be in great shape. Unfortunately, PHP is not my favorite language. :)
/*---------------------------------------*/
/* Output Starts
/*---------------------------------------*/
// Start container
echo '<div class="'.$container.' cap-wrap">';
// If hover
if($hover==true) {
echo '<div class="hover-wrap">';
// If lightbox
if($link=='lightbox') {
echo '<a rel="gallery-'.$postid.'" href="'.$full[0].'" title="'.$image_cap.'" class="swipebox">';
echo vk_hover('lightbox');
echo '<img src="'.$src[0].'" alt="'.$image_alt.'"/>';
echo '</a>';
// If post
} else {
echo '<a href="'.$post_link.'" title="'.$post_title.'">';
echo vk_hover('link');
echo '<img src="'.$src[0].'" alt="'.$image_alt.'"/>';
echo '</a>';
}
echo '</div>';
// If no hover
} else {
echo '<img src="'.$src[0].'" alt="'.$image_alt.'"/>';
}
// The Caption
if($caption==true && $image_cap!='') {
echo '<div class="caption no-link no-dec"><p>'.$image_cap.'</p></div>';
}
// End container
echo '</div>';
} // end foreach
} // end if attachments
} // end function
The matchMedia API has its uses: it's great for using addListener to let you know when your media queries switch. In my opinion it probably shouldn't be used here though.
I notice that the body of the page has the following classes: "noTablet", "noMobile", so when I emulated an iphone, sure enough "noMobile" became "mobile."
I was going to suggest implementing a 100% css fix using the body.noMobile selector, but it appears that you are using a ton of javascript to make the effect happen in the first place, which is setting inline styles, so...
Looking at your javascript I am finding the following compressed code:
s(".hover > div").css("opacity", "0"), s(".hover").hover(function() {
s(this).children("div").addClass("fadeUpIcon").animate({opacity: "1"}, 100)
}, function() {
s(this).children("div").css("opacity", "0").removeClass("fadeUpIcon")
if you were to switch all of the selectors to prepend body.noMobile like: $('body.noMobile .hover > div') You will likely eliminate the "overlay" for all mobile devices.
Then you could use simple (albeit your selectors will likely have to be more specific) CSS like:
body.mobile .hover {
}
To style it for mobile.
This will probably work out for you, but I am of the strong opinion that you should try to budget time to remove the javascript controlling this and simply use the :hover pseudo selector along with transforms and transitions to achieve the same effect. If you really want to use media queries instead of whichever mobile detection you currently use, then those could easily go into the CSS as well.
I am populating a list from php, and using the onClick event to run a javascript function once the link has been clicked, I need to associate the value for the engine to the link that has been clicked..and at the moment it is by having the value assigned to the TITLE tag as shown in the code below, I know this is not the proper way of doing this, so instead how could I store the values on the page and be able to access them in the javascript function, so depending on the link that is clicked it retrieves the corresponding value, I was thinking of a storing them as a javascript array or object? or something associative so I could access them from the id of the link so if the link is clicked with the id of e213, once it is clicked then inside the javascript function I could use, 'objectname'.value + 'idvariable', and the property names would be "value" + the id's of the links.
Any help would be great thanks!
<?php
connect();
$sql = "SELECT engine_id, engine, image, value FROM engines";
$result = mysql_query($sql);
while ($row=mysql_fetch_array($result) ) {
echo "<li><a style=\"color:#FF6600;\" id='e".$row['engine_id']."' title = '".$row['value']."' onclick='return enginepic(this)' onfocus='this.hideFocus=true;' href='".$row['image']."'>".$row['engine']."</a></li>";
}
?>
HTML5 allows attributes that start data- for this case. Eg...
<div data-whatever-property="some value" id="some-id"></div>
You can then fetch this data using:
document.getElementById('some-id').getAttribute('data-whatever-property')
Or with jquery...
$('#some-id').attr('data-whatever-property')
Or even easier...
$('#some-id').data('whateverProperty')
Notice that the data method on jQuery turns one-two-three to oneTwoThree. This is conforming to the dataset part of the html5 spec.
Also, consider adding your events via JavaScript rather than using onclick/onfocus/etc attributes. For a list of links, you'll get better performance out of delegated events, jquery makes these easy.
You could just pass in the data you want to the enginepic function as a parameter.
Your onclick would look something like this
onclick='return enginepic(this, \''" . $row['value'] . "\')
And your function declarations would look something like
function enginepic(oLink, data){
.
.
.
}